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。
