vue3 :class

<template>
  <div :class="classObject">这是一个使用 Vue 3 的 :class 指令的示例</div>
</template>

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

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

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

解释说明：

• :class 是 Vue.js 中用于动态绑定 class 属性的指令。
• 在上面的例子中，classObject 是一个计算属性，返回一个对象，根据 isActive 和 error 的值来决定应用哪些类。
• 如果 isActive 为 true 且 error 为 null，则会应用 active 类。
• 如果 error 存在且其类型为 fatal，则会应用 text-danger 类。
• 样式部分定义了 active 和 text-danger 类的样式。