vue 根据条件动态使用class样式

在 Vue 中，我们可以使用 `v-bind:class` 指令动态绑定 class 样式。例如，我们可以在模板中定义一个变量 `isActive`，根据它的值动态添加 `active` 类：

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

上述代码中，`{ active: isActive }` 是一个 JavaScript 对象，它表示当 `isActive` 为 `true` 时，该元素会添加 `active` 类。

如果我们需要根据多个条件来动态添加类，可以在对象中添加多个键值对：

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

上述代码中，当 `isActive` 为 `true` 时，该元素会添加 `active` 类；当 `hasError` 为 `true` 时，该元素会添加 `text-danger` 类。

除了对象语法，我们还可以使用数组语法来动态添加类。数组中可以包含多个类名和表达式，它们将被合并为一个最终的类名列表：

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

上述代码中，当 `isActive` 为 `true` 时，会添加 `active` 类；`errorClass` 变量中包含的类名也会被添加。当 `isActive` 为 `false` 时，会添加一个空的字符串，这样可以避免出现多余的空格。