vue3动态切换class

在Vue3中，动态切换`class`通常通过JavaScript的条件渲染或者计算属性来实现。你可以使用模板的`v-bind:class`指令，结合一个对象或者数组，根据数据的变化来设置元素的样式。

例如：

<div :class="{'active': isActive}">内容</div>

在这个例子中，`isActive`是一个数据属性，如果它的值为`true`，那么`div`将获得`active`这个CSS类。如果你需要更复杂的判断，可以使用对象：

<div :class="{ active: isActive, 'inactive': !isActive }">内容</div>

这里会同时应用`active`和`inactive`两个类，取决于`isActive`的状态。

如果你的数据驱动比较复杂，也可以在计算属性中处理：

export default {
  computed: {
    classes() {
      return { active: this.isActive, inactive: !this.isActive };
    }
  },
  //...
}

然后在HTML里直接引用这个计算属性：

<div :class="classes">内容</div>