Vue.js 中如何将 data 变量应用到 CSS 样式？

"Vue 的 data 变量不能直接传递到 CSS 中，因为 CSS 是一种样式语言，不支持动态的数据绑定。但是你可以通过 Vue 的样式绑定功能，将 data 变量的值应用到 HTML 元素的样式属性上。\n\n在 Vue 中，可以使用 v-bind 指令将 data 变量的值绑定到 HTML 元素的样式属性上。例如：\n\nhtml\n<template>\n <div :style="{ backgroundColor: bgColor }">Hello world!</div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n bgColor: 'red'\n }\n }\n}\n</script>\n\n\n在上面的例子中，将 data 变量 bgColor 的值绑定到了 div 元素的 backgroundColor 样式属性上。当 bgColor 的值发生变化时，div 的背景颜色也会相应地改变。\n\n除了使用 v-bind 指令绑定样式属性，还可以使用计算属性或方法来动态计算样式值。例如：\n\nhtml\n<template>\n <div :style="{ backgroundColor: computedBgColor }">Hello world!</div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n isRed: true\n }\n },\n computed: {\n computedBgColor() {\n return this.isRed ? 'red' : 'blue';\n }\n }\n}\n</script>\n\n\n在上面的例子中，根据 data 变量 isRed 的值，使用计算属性 computedBgColor 动态计算背景颜色的值，然后将其绑定到 div 元素的 backgroundColor 样式属性上。当 isRed 的值为 true 时，div 的背景颜色为红色；当 isRed 的值为 false 时，div 的背景颜色为蓝色。\n