Vue基础-动态class.

在 Vue 中，我们可以使用动态绑定 class 的方式来实现根据数据的变化来动态修改元素的样式。

有两种方式可以实现动态绑定 class：

1. 对象语法

通过在元素上绑定一个对象，对象的属性名为类名，属性值为一个布尔值，表示是否应该添加该类名。例如：

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

上面代码中，`active` 是类名，`isActive` 是一个布尔值，表示是否添加该类名。如果 `isActive` 为真，则元素会添加 `active` 类名，否则不会添加。

我们也可以在对象中使用多个属性来绑定多个类名，例如：

<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>

上面代码中，如果 `isActive` 为真，则元素会添加 `active` 类名，如果 `hasError` 为真，则元素会添加 `text-danger` 类名。

2. 数组语法

数组语法可以让我们在一个元素上绑定多个类名。例如：

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

上面代码中，`activeClass` 和 `errorClass` 是两个变量，它们都是字符串，代表类名。如果这两个变量的值分别为 `"active"` 和 `"text-danger"`，则元素会添加这两个类名。

另外，我们还可以在数组中使用三元表达式来动态地切换类名，例如：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

上面代码中，如果 `isActive` 为真，则添加 `activeClass` 类名，否则添加一个空字符串。无论如何都会添加 `errorClass` 类名。

总之，动态绑定 class 可以让我们根据数据的变化动态地修改元素的样式，非常方便。