vue 动态控制 class

在 Vue 中，可以通过绑定 class 属性来动态控制 class。具体方法如下：

1. 使用对象语法
可以使用一个对象来绑定 class，对象的属性名是 class 名称，属性值是一个 boolean 值，用于判断 class 是否生效。例如：

<div :class="{ active: isActive }"></div>

在这个例子中，如果 isActive 为 true，则 div 元素会应用 active 类名。

2. 使用数组语法
可以使用一个数组，将多个 class 名称绑定在一起，例如：

<div :class="[activeClass, errorClass]"></div>

在这个例子中，activeClass 和 errorClass 都是字符串，代表两个 class 名称，如果它们都存在，div 元素会应用这两个类名。

3. 使用计算属性
可以使用计算属性来动态计算 class 名称。例如：

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

在这个例子中，computedClass 是一个计算属性，它会根据一些条件计算出一个字符串作为 class 名称，例如：

computed: {
  computedClass: function () {
    return this.isActive ? 'active' : 'inactive'
  }
}

在这个例子中，如果 isActive 为 true，则计算属性会返回 'active'，div 元素会应用 active 类名。如果 isActive 为 false，则计算属性会返回 'inactive'，div 元素会应用 inactive 类名。