vue 动态绑定class

在Vue中，动态绑定class有多种方法。第一种方法是使用对象语法，可以根据条件来动态地添加或删除class。例如，可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为条件。当属性值为真时，对应的class会被添加到元素上。例如，可以使用以下代码来动态绑定class：

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

其中，`isActive`是一个布尔值，如果`isActive`为真，则`active`类会被添加到`<div>`元素上。

第二种方法是使用数组语法，可以根据多个条件来动态地添加或删除class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个数组，数组中的每个元素都是一个条件表达式或者是一个class名。如果条件表达式为真，则对应的class会被添加到元素上。例如：

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

其中，`activeClass`和`errorClass`都是字符串类型的class名，如果它们对应的条件为真，则对应的class会被添加到`<div>`元素上。

第三种方法是使用对象语法的缩写形式，可以更简洁地绑定class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为布尔值。如果属性值为真，则对应的class会被添加到元素上。例如：

<div :class="{activeTwo: isActive, 'activeThree': hasError}">文字</div>

其中，`isActive`和`hasError`都是布尔值，如果它们为真，则`activeTwo`和`activeThree`类会被添加到`<div>`元素上。

这些方法都可以实现动态绑定class，并根据条件来添加或删除class，以实现样式的动态改变。