vue 动态绑定css属性
时间: 2023-07-10 15:12:01 浏览: 212
Vue 框架之动态绑定 css 样式实例分析
可以使用Vue的绑定语法来动态绑定CSS属性。例如,使用`:style`绑定属性,可以根据Vue实例中的数据动态设置CSS样式。下面是一个例子:
```html
<template>
<div :style="{ backgroundColor: bgColor }"></div>
</template>
<script>
export default {
data() {
return {
bgColor: 'red'
}
}
}
</script>
```
在上面的例子中,使用`:style`绑定了一个对象,该对象包含了一个`backgroundColor`属性,它的值是Vue实例中的`bgColor`数据。当`bgColor`的值发生变化时,动态绑定的CSS样式也会随之改变。
阅读全文