t.csdn.cn/3rp9I 引用自此文章
基本使用
单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上,有了这一特性,可以将大量的动态样式通过状态来驱动了,而不是写动态的 calss 类名或者获取 dom 来动态设置了。
<script setup lang="ts">
import { ref } from "vue";
const color = ref('red');
setTimeout(() => color.value = 'blue' , 2000);
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind(color);
}
</style>