vue3 动态class

在Vue 3中，你可以使用动态类绑定来添加或移除类名。动态类绑定可以通过以下几种方式实现：

1. 单个类名绑定：你可以使用常规的数据绑定语法将一个变量与class属性绑定。当该变量的值为真时，类名将被添加；当值为假时，类名将被移除。例如：

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

在上述例子中，当isActive为真时，div元素将附加一个名为"active"的类。

2. 数组语法：你可以使用数组来动态绑定多个类名。数组中每个元素都可以是一个字符串或一个对象。字符串表示一个静态类名，而对象则可以用于条件性地添加或移除类名。例如：

<div :class="[activeClass, errorClass]"></div>

在上述例子中，activeClass和errorClass是两个变量，它们分别表示静态的类名。当这两个变量的值为真时，对应的类名将被添加到div元素上。

3. 对象语法：你还可以使用对象语法来动态添加或移除多个类名。对象中的键表示静态类名，而对应的值则可以是一个布尔值，用于条件性地添加或移除类名。例如：

<div :class="{ active: isActive, 'text-red': isError }"></div>

在上述例子中，isActive和isError是两个变量，它们分别表示是否应该添加active类和text-red类。当这两个变量的值为真时，对应的类名将被添加到div元素上。

通过以上几种方式，你可以根据数据的变化来动态地添加或移除类名，实现灵活的样式控制。