在Vue3中，动态绑定class有多种方式，以下是几种常用的方法：

1 对象语法

通过将一个对象传递给v-bind:class，可以动态绑定多个class。这个对象的键表示类名，值表示是否添加这个类名。

例如，我们有一个布尔变量isActive，如果为真则添加类名active：

<template>
  <div v-bind:class="{ active: isActive }"></div>
</template>

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

如果我们需要绑定多个类名，可以在对象中添加多个键值对：

<template>
  <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

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

2 数组语法

通过将一个数组传递给v-bind:class，可以动态绑定多个class。数组中的每个元素都会被作为类名添加。

例如，我们有一个字符串变量color，它包含要添加的类名：

<template>
  <div v-bind:class="[color]"></div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    };
  }
};
</script>

我们也可以在数组中使用对象语法和字符串混合使用：

<template>
  <div v-bind:class="[{ active: isActive }, color]"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      color: 'red'
    };
  }
};
</script>

3 字符串拼接

字符串拼接是最基本的一种方式，它允许我们根据表达式的计算结果拼接一个class名并将其绑定到一个组件上。我们可以将一个由多个class名拼接而成的字符串作为class属性的值传递给组件。下面是一个例子：

<template>
  <div :class="activeClass + ' ' + errorClass"></div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'error'
    }
  }
}
</script>

在上面的例子中，组件上将同时添加名为“active”和“error”的两个class。

Vue3中动态绑定class的组件中的使用方式不局限于上面三种，我们可以根据实际需要选择合适的方式来实现动态绑定class。