Vue 3 中 v-bind:class 指令详解：动态绑定 CSS 类

在 Vue 3 中，v-bind:class 用于动态绑定一个或多个 CSS 类到一个元素上。它可以根据特定的条件来添加或移除 CSS 类。

v-bind:class 可以接收多种类型的值，包括对象、数组和字符串。

使用对象语法，你可以根据条件动态添加或移除 CSS 类。对象的键是 CSS 类名，值是一个布尔值，决定是否应该将该 CSS 类应用于元素。如果值为 true，则对应的 CSS 类将被添加；如果值为 false，则对应的 CSS 类将被移除。你还可以使用三元表达式或计算属性来动态设置这些布尔值。

以下是几个示例：

使用对象语法动态绑定 CSS 类：

<template>
  <div :class="{ active: isActive, 'text-danger': isError }">示例</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  }
};
</script>

在上述示例中，如果 isActive 的值为 true，则 active 类将被应用于 <div> 元素；如果 isError 的值为 true，则 text-danger 类将被应用于 <div> 元素。

使用数组语法绑定多个 CSS 类：

<template>
  <div :class="[activeClass, errorClass]">示例</div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    };
  }
};
</script>

在上述示例中，activeClass 和 errorClass 都是字符串变量，它们的值将被作为 CSS 类应用于 <div> 元素。

使用计算属性绑定 CSS 类：

<template>
  <div :class="computedClasses">示例</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    computedClasses() {
      return {
        active: this.isActive,
        'text-danger': this.isError
      };
    }
  }
};
</script>

在上述示例中，通过计算属性 computedClasses 返回一个对象，根据 isActive 和 isError 的值来动态绑定 CSS 类。

总结起来，v-bind:class 指令在 Vue 3 中用于动态地绑定 CSS 类，让你可以根据条件来添加或移除 CSS 类，以实现灵活的样式控制。