vue3中怎么动态添加或者取消class或者属性

1. 动态添加 / 取消类名（class）
   • 使用对象语法：
     • 基本原理：在 Vue 3 中，可以通过一个对象来动态地绑定类名。对象的键是类名，值是一个布尔表达式。当布尔表达式为true时，该类名会被添加到元素上；当布尔表达式为false时，该类名会被移除。
     • 示例代码：
       • 假设在一个 Vue 组件中有一个按钮，点击按钮时改变一个div元素的类名。

   •   - **解释说明**：
         - 在模板中，`div`元素的`class`绑定使用了对象语法`:class="{ 'active': isActive }"`。这意味着当`isActive`的值为`true`时，`active`类名会被添加到`div`元素上，从而应用`active`类对应的样式（在`style`标签中有定义）。
         - 在`setup`函数中，`isActive`是一个`ref`对象，用于存储类名是否应该被添加的状态。`toggleClass`函数用于切换`isActive`的值。当按钮被点击时，`toggleClass`函数会被调用，它会将`isActive`的值取反，从而实现类名的添加或移除。
     - **使用数组语法（用于多个类名的动态组合）**：
       - **基本原理**：可以通过一个数组来动态地绑定类名。数组中的元素可以是字符串形式的固定类名，也可以是一个对象语法的动态类名绑定（如前面所述），或者是一个返回类名的函数。
       - **示例代码**：
         - 假设一个组件中有一个`div`元素，它的类名根据不同的条件组合来动态添加。
         - ```html
           
           
           
     

   • 解释说明：
     • 在模板中，div元素的class绑定使用了数组语法:class="['base - class', { 'active': isActive }, getExtraClass()]。其中'base - class'是一个固定的类名，总是会被添加到div元素上。{ 'active': isActive }是一个对象语法的动态类名绑定，根据isActive的值来决定是否添加active类名。getExtraClass是一个函数，它返回一个类名'special - class'，这个类名也会被添加到div元素上。
     • 在setup函数中，isActive的作用与前面类似，getExtraClass函数用于返回一个额外的类名，你可以根据实际条件在这个函数中返回不同的类名，实现更复杂的类名组合。

   • 动态添加 / 取消属性（attribute）

     • 使用v - bind（缩写为:）指令：
       • 基本原理：v - bind指令用于动态地绑定一个或多个属性到元素上。它的值可以是一个表达式，这个表达式可以是一个简单的值、一个对象或者一个函数返回值。
       • 示例代码（动态绑定disabled属性到按钮上）：

   • - **解释说明**：
       - 在模板中，`button`元素的`disabled`属性使用`v - bind`指令绑定了`isDisabled`变量。当`isDisabled`的值为`true`时，`disabled`属性会被添加到按钮上，按钮将变为不可用状态；当`isDisabled`的值为`false`时，`disabled`属性不会被添加，按钮是可用的。
       - 在`setup`函数中，`isDisabled`是一个`ref`对象，用于存储按钮是否应该被禁用的状态。你可以根据实际情况在组件的其他方法中修改`isDisabled`的值，从而动态地控制按钮的禁用状态。