vue3 根据判断条件动态绑定class

在 Vue 中，可以使用 `:class` 绑定动态 class。你可以通过判断条件来动态绑定不同的 class，如下所示：

<template>
  <div :class="['box', { 'active': isActive }]">内容</div>
</template>

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

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

.active {
  background-color: #00bcd4;
}
</style>

在上面的代码中，我们使用了 `:class` 绑定动态 class。`['box', { 'active': isActive }]` 表示 `box` 类名和一个对象，对象中包含了 `active` 类名和一个布尔值 `isActive`。当 `isActive` 为 `true` 时，`active` 类名会被添加到元素上，从而使元素具有 `active` 类样式。当 `isActive` 为 `false` 时，`active` 类名会被移除，元素不再具有 `active` 类样式。

需要注意的是，`:class` 绑定的是一个对象，对象的键名是类名，值可以是布尔值或返回布尔值的表达式，也可以是一个包含类名的字符串或数组。你可以根据实际需求选择不同的方式进行动态绑定 class。