vue3动态添加class

在Vue3中，可以使用v-bind或者简写的":"语法来动态绑定class。具体的做法是在需要绑定class的元素上使用v-bind:class指令，并将要绑定的class名称作为表达式传递给它。这个表达式可以是一个对象、一个数组、一个计算属性或者一个方法的返回值。

如果你想要动态添加一个class，你可以通过在对象中设置一个属性，然后根据条件来决定是否添加这个属性。例如，你可以在data中定义一个名为class1的数据属性，然后在模板中使用v-bind:class来绑定它，如下所示：

<div v-bind:class="{ class1: isClass1 }"></div>

在这个例子中，class1是你想要绑定的class名称，isClass1是一个用于控制是否添加class1的布尔值。

你也可以在模板中使用三元表达式来动态切换class。例如，你可以根据条件来决定是否添加class1，如下所示：

<div v-bind:class="isClass1 ? 'class1' : ''"></div>

在这个例子中，isClass1是一个用于控制是否添加class1的布尔值。如果isClass1为true，那么class1将被添加，否则将不添加。

除了以上的方法，你还可以使用数组来动态添加多个class。例如，你可以在data中定义一个名为classList的数组，然后在模板中使用v-bind:class来绑定它，如下所示：

<div v-bind:class="classList"></div>

在这个例子中，classList是一个包含要绑定的class名称的数组。根据数组中的元素，相应的class将会被添加。

总的来说，Vue3提供了多种灵活的方式来动态添加class，你可以根据具体的需求选择适合的方式来实现。