vue2 :class

<template>
  <div :class="classObject">Hello Vue!</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>

解释说明：

• :class 是 Vue.js 中用于动态绑定类名的指令。
• 在上面的例子中，<div> 元素的类名是通过 :class 绑定到一个计算属性 classObject 上的。
• classObject 返回一个对象，对象的键是类名，值是一个布尔值。如果值为 true，则该类名会被应用到元素上；否则不会应用。
• isActive 和 hasError 是两个数据属性，分别控制是否应用 active 和 text-danger 类。
• 样式部分定义了 active 类会设置背景颜色为绿色，text-danger 类会设置文本颜色为红色。

这样可以根据组件的状态动态地添加或移除类名。