vue 实现动态样式

动态样式绑定方法

在Vue中实现动态样式主要通过v-bind:class（简写:class）和v-bind:style（简写:style）实现，以下是具体实现方式：

对象语法

通过对象语法可以动态切换class，当值为true时添加对应的类名：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

对应的data：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

数组语法

数组语法允许同时绑定多个class，可以是静态或动态的：

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

内联样式绑定

使用:style可以直接绑定内联样式，支持对象和数组语法：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 14
  }
}

计算属性绑定样式

对于更复杂的逻辑，可以使用计算属性返回样式对象：

computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

动态组件样式

在动态组件上使用v-bind:class时，类名会添加到根元素上：

<component :is="currentComponent" :class="componentClass"></component>

多值绑定

可以为style属性提供包含多个值的数组，常用于提供多个带前缀的值：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

自动前缀

当使用需要浏览器前缀的CSS属性时，Vue会自动检测并添加适当的前缀。

注意事项

• 当v-bind:class和普通class属性共存时，两者会合并
• 在自定义组件上使用class时，这些class会添加到组件的根元素上
• :style绑定支持CSS属性名可以用驼峰式或短横线分隔（需要用引号括起来）

响应式更新

所有绑定的样式都是响应式的，当依赖的数据变化时，样式会自动更新，无需手动操作DOM。