vue实现addclass
Vue 实现动态添加 class 的方法
在 Vue 中动态添加 class 可以通过多种方式实现，以下是常见的几种方法：
使用对象语法
通过绑定一个对象到 :class，可以动态切换 class。对象的键是 class 名，值是布尔值，决定是否应用该 class。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>对应的 data 部分：
data() {
return {
isActive: true,
hasError: false
}
}使用数组语法
可以绑定一个数组到 :class，数组中可以是表达式或变量。
<div :class="[activeClass, errorClass]"></div>对应的 data 部分：
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}在组件上使用
当在自定义组件上使用 class 属性时，这些 class 会被添加到组件的根元素上。
<my-component class="baz boo"></my-component>结合对象和数组语法
可以混合使用对象和数组语法来实现更复杂的 class 绑定。
<div :class="[{ active: isActive }, errorClass]"></div>使用计算属性
对于更复杂的逻辑，可以使用计算属性返回 class 对象或数组。
<div :class="classObject"></div>对应的计算属性：
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}动态 class 名
可以使用表达式动态生成 class 名。
<div :class="'prefix-' + dynamicClass"></div>注意事项
- Vue 会自动合并
class和:class的值 - 对象语法中，class 名可以使用引号包裹（特别是含有连字符时）
- 数组语法中可以使用三元表达式实现条件 class
- 在组件上使用时，非根元素的 class 需要通过
$attrs传递
