Vue3中，怎么使用:class指令来动态绑定class

在Vue3中，使用:class指令来动态绑定class的方式与Vue2中略有不同，具体如下：

1. 绑定单个class

使用:class指令时，可以将一个对象传递给它，这个对象的属性名就是要绑定的class名，属性值是一个布尔值，表示该class是否生效。例如：

<template>
  <div :class="{ active: isActive }">...</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

上述代码中，当isActive为true时，div元素会自动添加class名为"active"的class。

2. 绑定多个class

如果需要绑定多个class，可以将一个数组传递给:class指令，数组的每个元素都是一个要绑定的class名。例如：

<template>
  <div :class="[colorClass, sizeClass]">...</div>
</template>

<script>
export default {
  data() {
    return {
      colorClass: 'red',
      sizeClass: 'large'
    }
  }
}
</script>

上述代码中，div元素会同时添加class名为"red"和"large"的class。

3. 绑定带条件的class

可以在:class指令中使用三元表达式来绑定带条件的class。例如：

<template>
  <div :class="isActive ? 'active' : ''">...</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

上述代码中，当isActive为true时，div元素会自动添加class名为"active"的class，否则不添加任何class。

4. 动态绑定class

如果需要动态绑定class，可以在:class指令中使用计算属性。例如：

<template>
  <div :class="classes">...</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    classes() {
      return {
        active: this.isActive,
        'text-red': !this.isActive
      }
    }
  }
}
</script>

上述代码中，classes是一个计算属性，它返回一个对象，这个对象的属性名就是要绑定的class名，属性值是一个布尔值或字符串，表示该class是否生效。在这个例子中，当isActive为true时，div元素会自动添加class名为"active"的class，否则会添加class名为"text-red"的class。