vue 动态class

在 Vue 中，可以使用 `v-bind:class` 指令来动态绑定 class。你可以将一个对象作为 `v-bind:class` 的值，该对象的属性名表示 class 名称，属性值表示是否添加该 class。例如：

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

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

上面的代码中，当 `isActive` 为 `true` 时，`active` 类会被添加到 `div` 元素上。

你也可以使用一个计算属性来返回一个对象，以动态计算 class：

<template>
  <div v-bind:class="classObject"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        'text-danger': !this.isActive
      }
    }
  }
}
</script>

上面的代码中，`classObject` 计算属性返回一个对象，该对象根据 `isActive` 计算出两个 class 名称：`active` 和 `text-danger`。当 `isActive` 为 `true` 时，`active` 类会被添加到 `div` 元素上；当 `isActive` 为 `false` 时，`text-danger` 类会被添加到 `div` 元素上。

除了对象语法之外，还可以使用数组语法和字符串语法来动态绑定 class。例如：

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

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }
}
</script>

上面的代码中，`v-bind:class` 的值是一个数组，数组中的元素可以是字符串或计算属性，这些字符串和计算属性的值会被添加到 `div` 元素上。