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不会被覆盖。
