状态驱动的动态 CSS

单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上。

<template>
  <div class="box1">hello</div>
  <button @click="changcolor">修改box1的样式</button>
  <div class="box2">hello66666</div>
  <button @click="changother">修改box2的样式</button>
</template>

<script setup>

import { ref, reactive } from "vue"


let color = ref("red")
let changcolor = () => {
  color.value = "blue"
}

let other = reactive({
  width: "200px",
  height: "100px"
})

let changother = () => {
  other.width = "400px"
}

</script>

<style lang="scss" scoped>
.box1 {
  color: v-bind('color');
}

.box2 {
  background-color: yellow;
  width: v-bind('other.width');
  height: v-bind('other.height');
}
</style>