vue 动态绑定class

<template>
  <div :class="classObject">
    我是一个带有动态绑定 class 的 div 元素。
  </div>
</template>

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

<style>
.active {
  background-color: green;
}

.text-danger {
  color: red;
}
</style>

解释说明：

1. <div :class="classObject">：使用 v-bind:class 指令（简写为 :）来动态绑定 class。classObject 是一个计算属性，返回一个对象，根据对象中的键值对决定是否应用相应的 CSS 类。

2. data()：定义了两个布尔类型的变量 isActive 和 hasError，用于控制类的动态切换。

3. computed: { classObject() }：计算属性 classObject 返回一个对象，根据 isActive 和 hasError 的值来决定是否应用 active 和 text-danger 类。

4. 样式部分：定义了 .active 和 .text-danger 两个类，分别设置了背景颜色和文本颜色。

通过这种方式，可以根据数据的变化动态地添加或移除 CSS 类。