vue class动态绑定样式

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

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

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

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

解释说明：

• :class="classObject"：使用 Vue 的 v-bind:class 指令（简写为 :）来动态绑定样式。classObject 是一个计算属性，返回一个对象，对象的键是类名，值是布尔值，表示是否应用该类。
• data()：定义了两个数据属性 isActive 和 error，用于控制样式的动态变化。
• computed：定义了一个计算属性 classObject，根据 isActive 和 error 的值返回相应的类名对象。
• style：定义了两个 CSS 类 .active 和 .text-danger，分别设置背景颜色和文本颜色。

这样，当 isActive 为 true 时，元素会应用 active 类；当 error 为 true 时，元素会应用 text-danger 类。