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'
  }
}

结合对象和数组语法

可以在数组语法中使用对象语法：

<div :class="[{ active: isActive }, errorClass]"></div>

计算属性

对于复杂的 class 逻辑，可以使用计算属性：

computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

模板中使用：

<div :class="classObject"></div>

组件上的 class

当在自定义组件上使用 class 时，这些 class 会被添加到组件的根元素上：

<my-component class="baz boo"></my-component>

动态 class 名

可以使用字符串拼接或模板字符串动态生成 class 名：

<div :class="`prefix-${dynamicClass}`"></div>