Vue3新属性 — css中使用v-bind（v-bind in css）
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
在Vue 3中，你可以使用内联样式或者CSS绑定来动态地改变元素的CSS属性。这里有一个例子，展示了如何在Vue 3中使用v-bind绑定一个CSS属性：
<template>
<div>
<div :style="{ color: dynamicColor }">这是一段文本</div>
<button @click="changeColor">改变颜色</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const dynamicColor = ref('red');
function changeColor() {
dynamicColor.value = dynamicColor.value === 'red' ? 'blue' : 'red';
}
return { dynamicColor, changeColor };
}
};
</script>在这个例子中，我们创建了一个名为dynamicColor的响应式引用，并通过v-bind将其绑定到div元素的style属性上。当点击按钮时，changeColor函数会被触发，从而改变dynamicColor的值，进而更新元素的颜色。
评论已关闭