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>

解释说明

1. <template> 部分:

   • 使用 :class 指令来动态绑定 classObject 计算属性，该属性返回一个对象，用于控制类的添加或移除。

2. <script> 部分:

   • data() 函数中定义了两个布尔值变量 isActive 和 error，用于控制样式的显示。
   • computed 中定义了 classObject 计算属性，它返回一个对象。根据 isActive 和 error 的值，决定是否应用对应的 CSS 类名。

3. <style> 部分:

   • 定义了两个样式类 .active 和 .text-danger，分别设置了背景颜色和文字颜色。

这样，当 isActive 为 true 时，会应用 .active 样式；当 error 为 true 时，会应用 .text-danger 样式。