vue 实现动态样式
动态样式绑定方法
Vue 提供了多种方式实现动态样式绑定，可以根据不同场景选择合适的方法。
类名绑定
使用 v-bind:class 或简写 :class 实现动态类名
<div :class="{ active: isActive, 'text-danger': hasError }"></div>数据定义：
data() {
return {
isActive: true,
hasError: false
}
}数组语法 可以绑定多个类名
<div :class="[activeClass, errorClass]"></div>data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}内联样式绑定
对象语法
使用 v-bind:style 或简写 :style 实现动态样式
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data() {
return {
activeColor: 'red',
fontSize: 14
}
}数组语法 可以应用多个样式对象
<div :style="[baseStyles, overridingStyles]"></div>计算属性绑定
对于复杂逻辑，可以使用计算属性
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}<div :class="classObject"></div>动态样式实践技巧
响应式更新 所有绑定都是响应式的，当数据变化时会自动更新DOM
自动前缀 Vue会自动为需要浏览器前缀的CSS属性添加前缀
多重值 可以为style绑定提供包含多个值的数组
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>组件作用域 在组件中使用时，类名会绑定到组件的根元素上
与静态类共存 动态绑定可以与普通class属性共存
<div class="static" :class="{ active: isActive }"></div>
