vue class绑定的几种方法

<template>
  <div>
    <!-- 方法一：直接绑定对象 -->
    <p :class="{ active: isActive }">这是一个使用对象绑定类的示例</p>

    <!-- 方法二：绑定多个类名 -->
    <p :class="[activeClass, errorClass]">这是一个使用数组绑定类的示例</p>

    <!-- 方法三：结合对象和数组 -->
    <p :class="[{ active: isActive }, errorClass]">这是一个结合对象和数组绑定类的示例</p>

    <!-- 方法四：使用计算属性 -->
    <p :class="classObject">这是一个使用计算属性绑定类的示例</p>
  </div>
</template>

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

<style>
.active {
  color: green;
}

.error {
  color: red;
}

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

解释说明

1. 方法一：直接绑定对象

   • 使用 :class 绑定一个对象，键是类名，值是一个布尔表达式。如果表达式为真，则应用该类。
   • 示例中，isActive 为 true，所以 active 类会被应用到 <p> 元素上。

2. 方法二：绑定多个类名

   • 使用 :class 绑定一个数组，数组中的每一项都是一个类名或类对象。
   • 示例中，activeClass 和 errorClass 都会被应用到 <p> 元素上。

3. 方法三：结合对象和数组

   • 可以在数组中混合使用类对象和类名字符串。
   • 示例中，{ active: isActive } 是一个类对象，errorClass 是一个类名字符串，它们都会被应用到 <p> 元素上。

4. 方法四：使用计算属性

   • 使用计算属性来动态生成类对象。
   • 示例中，classObject 计算属性返回一个对象，根据 isActive 和 errorClass 的值决定是否应用相应的类。