vue 绑定class

<template>
  <div :class="classObject">这是一个绑定了 class 的 div</div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个对象，用于动态绑定 class
      classObject: {
        active: true, // 如果为 true，则会添加 'active' 类
        'text-danger': false // 如果为 true，则会添加 'text-danger' 类
      }
    };
  }
};
</script>

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

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

解释说明：

• :class="classObject"：使用 v-bind:class 指令（简写为 :）来动态绑定一个对象 classObject。这个对象的键是类名，值是一个布尔值，表示是否应用该类。
• data() 中定义了 classObject 对象，其中 active 为 true，所以会应用 active 类；text-danger 为 false，所以不会应用 text-danger 类。
• 在样式中定义了 .active 和 .text-danger 的样式，分别设置了背景颜色和文字颜色。