vue3动态class

Vue3 中可以使用 `:class` 指令来绑定动态 class，例如：

<template>
  <div :class="{ active: isActive, 'text-bold': isBold }">Hello, World!</div>
</template>

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

在上面的示例中，`isActive` 和 `isBold` 都是响应式数据。通过 `:class` 指令可以将这些数据与具体的 class 绑定，实现动态 class 效果。

除了纯粹的 class 名称，我们还可以使用对象语法、数组语法和计算属性来绑定动态 class，例如：

<template>
  <div :class="classObject">Hello, World!</div>
  <div :class="[classObject, { 'text-bold': isBold }]">Hello, World!</div>
  <div :class="computedClass">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-bold': false
      },
      isBold: true
    }
  },
  computed: {
    computedClass() {
      return {
        active: true,
        'text-bold': this.isBold
      }
    }
  }
}
</script>

在上面的示例中，`classObject` 是一个包含 class 名称的对象，通过 `:class` 指令可以将其与元素绑定。另外，我们还可以通过数组语法将多个 class 对象合并到一起，实现更为灵活的动态 class 绑定。最后，我们还可以使用计算属性来动态计算 class 对象，实现更为复杂的动态 class 效果。