style 状态驱动

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

语法

---

<script> 状态驱动 Css

变量语法

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

表达式语法，需要用引号包裹起来

<script>
export default {
  data() {
    return {
      theme: {
        color: 'red'
      }
    }
  }
}
</script>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

<script setup> 状态驱动 Css

变量语法

<template>
  <div class="text">hello</div>
</template>

<script setup>
const color = "red";
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

表达式语法，需要用引号包裹起来

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>