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 传递