vue实现addclass
Vue 实现动态添加 class 的方法
在 Vue 中动态添加 class 有多种方式，可以根据不同场景选择合适的方法。
对象语法
通过对象语法可以动态切换 class。对象的键是 class 名，值是布尔值，决定是否应用该 class。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>当 isActive 或 hasError 为 true 时，对应的 class 会被应用。
数组语法
数组语法允许同时应用多个 class，可以包含静态字符串或动态变量。
<div :class="[activeClass, errorClass]"></div>data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}绑定计算属性
对于更复杂的逻辑，可以使用计算属性返回 class 对象或数组。
<div :class="classObject"></div>computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}与普通 class 共存
动态绑定的 class 可以和普通 class 属性共存。
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>在组件上使用
当在自定义组件上使用 class 绑定时，这些 class 会被添加到组件的根元素上，已存在的 class 不会被覆盖。
<my-component class="baz boo" :class="{ active: isActive }"></my-component>动态 class 名
可以使用字符串拼接或模板字符串来生成动态 class 名。
<div :class="`prefix-${dynamicClass}`"></div>data() {
return {
dynamicClass: 'custom'
}
}这些方法提供了灵活的方式来处理 Vue 中的 class 绑定，可以根据具体需求选择最适合的方式。
