vue添加class

在Vue中，可以通过v-bind指令给元素动态地添加class。v-bind指令是Vue提供的一个用于绑定属性的指令，可以通过它将Vue实例中的数据绑定到DOM元素的属性上。

在Vue的模板中，我们可以使用v-bind指令来绑定class属性。具体的用法是在class属性前面加上v-bind前缀，然后后面跟一个表达式，这个表达式可以是一个对象或数组。

1. 对象语法：

通过传递一个对象给v-bind:class指令，可以根据对象的属性值来动态地决定是否给元素添加class。对象的属性名对应class名，属性值为一个布尔值，表示是否添加该class。例如，下面的代码给一个按钮元素根据data中的isActive属性值来决定是否添加active class：

```

按钮

```

当isActive的值为true时，按钮元素会添加active class。

2. 数组语法：

通过传递一个数组给v-bind:class指令，可以根据数组中的元素来动态地添加多个class。数组中的元素可以是对象或普通字符串。例如，下面的代码给一个按钮元素根据data中的activeClasses数组来决定添加哪些class：

```

按钮

```

上述代码中，按钮元素会添加active和large两个class。

3. 用computed属性计算class：

不仅仅可以在data中定义数据来决定class，还可以在computed属性中根据一些规则来计算class。例如，下面的代码根据data中的isActive属性的值来计算class：

```

按钮

```

上述代码中，当isActive的值为true时，按钮元素会添加active class。

以上就是Vue中动态添加class的几种常见方式。通过利用v-bind指令可以根据Vue实例中的数据动态地给元素添加class，可以让我们根据需要来灵活地改变元素的样式。