vue :class

<template>
  <div :class="classObject">This is a Vue component with dynamic class binding.</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 中用于动态绑定类名的语法糖。它允许你根据组件的状态或数据属性来动态地添加或移除 CSS 类。
• 在上面的示例中，classObject 是一个计算属性，返回一个对象，该对象的键是类名，值是一个布尔表达式。如果表达式的值为 true，则相应的类名会被添加到元素上；如果为 false，则不会添加。
• isActive 和 hasError 是两个数据属性，它们控制着是否应用 active 和 text-danger 类。
• 样式部分定义了 active 类（背景色为绿色）和 text-danger 类（文本颜色为红色）。