vue实现动态绑定样式

动态绑定样式的方法

在Vue中实现动态绑定样式主要通过v-bind:class和v-bind:style指令完成，支持对象语法、数组语法等多种灵活方式。

对象语法

通过对象可以动态切换class，对象的键为类名，值为布尔值决定是否应用该类：

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

对应数据：

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

数组语法

可以传递多个class组成的数组：

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

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

内联样式绑定

对象语法

:style支持直接绑定样式对象，属性名可用camelCase或kebab-case：

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

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

数组语法

可以绑定多个样式对象到同一元素：

<div :style="[baseStyles, overridingStyles]"></div>

自动前缀处理

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

多重值提供

可以为style绑定提供包含多个值的数组，浏览器会采用最后一个支持的值：

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

计算属性绑定

对于复杂逻辑推荐使用计算属性返回class或style对象：

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

组件上的使用

在自定义组件上使用class绑定时，这些class会添加到组件的根元素上，已存在的class不会被覆盖。