vue实现addclass
在 Vue 中动态添加 class
Vue 提供了多种方式动态添加 class，可以根据需求选择合适的方法。
对象语法
通过对象语法可以动态切换 class。对象的键是 class 名，值是布尔值，决定是否应用该 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'
}
}结合对象和数组语法
可以在数组语法中使用对象语法来更灵活地控制 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 时，这些 class 会被添加到组件的根元素上，且不会覆盖已有的 class。
<my-component class="baz boo"></my-component>使用 $refs 和原生方法
如果需要直接操作 DOM 元素，可以通过 $refs 访问元素并使用原生 classList API。
<div ref="myElement"></div>methods: {
addClass() {
this.$refs.myElement.classList.add('new-class')
}
}以上方法可以根据不同场景选择使用，Vue 推荐优先使用数据驱动的方式（对象语法或数组语法）来管理 class。
