vue动态绑定class

<template>
  <div :class="classObject">动态绑定 class 示例</div>
</template>

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

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

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

解释说明：

1. <div :class="classObject">：通过 :class 绑定一个对象 classObject，根据对象的属性值动态决定应用哪些类。
2. data()：定义了两个布尔类型的变量 isActive 和 hasError，用于控制类的动态绑定。
3. computed: { classObject() }：计算属性 classObject 返回一个对象，根据 isActive 和 hasError 的值来决定是否应用 active 或 text-danger 类。
4. 样式部分：定义了两个类 .active 和 .text-danger，分别设置背景颜色为绿色和文字颜色为红色。

这样可以根据数据的变化动态地给元素添加或移除 CSS 类。