如何在 vue.js 中添加动态类 - Javascript

在 vue.js 中，我们可以通过绑定 class 属性来添加动态类。具体的绑定方式为：

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

在上述代码中，我们使用了 v-bind 指令来绑定 class 属性，并将一个对象作为参数传递给了它。该对象包含了要动态添加的 class 类名及其对应的判断条件。

在该示例中，我们将类名 "active" 绑定到一个名为 "isActive" 的计算属性上，即：

data: {
  isActive: true
},
computed: {
  className: function () {
    return {
      active: this.isActive
    }
  }
}

这样，当 isActive 属性为 true 时，"active" 类名就会被添加到该元素上。

当然，我们也可以动态地给 class 属性添加多个类名。只需要在上述绑定方式中传递一个包含多个键值对的对象即可，如：

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

在该示例中，我们同时动态添加了 "active" 和 "error" 两个类名，其中 "isActive" 和 "isError" 分别作为它们的判断条件。

综上，通过上述的绑定方式，我们可以实现在 vue.js 中添加动态类的功能，从而使页面样式更加灵活多变。

完整代码片段

<template>
  <div v-bind:class="{ active: isActive, error: isError }">
    <p>Hello, World!</p>
  </div>
</template>

<script>
export default {
  data: {
    isActive: true,
    isError: false
  }
}
</script>