Vue 3 动态添加类名：使用 v-bind:class 指令

在 Vue 3 中，可以使用v-bind:class指令来根据条件添加类名。下面是一个示例：

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

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

在上面的示例中，active类名会在isActive为true时被添加到<div>元素上。

你还可以使用计算属性来根据不同的条件添加不同的类名。下面是一个示例：

<template>
  <div :class="classNames">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isHighlighted: false
    }
  },
  computed: {
    classNames() {
      return {
        active: this.isActive,
        highlighted: this.isHighlighted
      }
    }
  }
}
</script>

在上面的示例中，根据isActive和isHighlighted的值，active和highlighted类名会根据条件被添加到<div>元素上。