动态更改Class，但想的复杂化

Q：今天在写前端过程中遇到一个问题，简单对选中的元素进行增加和删除 class 的操作

第一反应：简单，直接 v-model:class 绑定就好，然后用布尔值来判断，但问题来了，因为我是将遍历的一个数组全部放在了js文件中，之后引用并在div标签中去遍历，我发现用不了，根本没办法响应式更改，单单是改变了字段的值

这个时候作者的脑子没有思考直接去百度了，如何操作dom元素的更改 ，接下来如各位读者所见，我在简单的问题上面越走越远，扯到了直接去操作 dom元素 ，显然在vue中直接操作 dom元素 不太好

当然经过一个小时的折腾，脑子终于反应过来了，知道了我只用把数组给响应式化一下，就很简单的 const list = reactive(navList) 这个时候去遍历响应变量 list 就可以了，实时的更改每个 item 的 isACtive 字段的布尔值就可以做到对 class 的增删

复盘问题

1. 首先是没有经过思考，直接去百度，然后再操作 dom 的想法中越走越远，其次是操作 dom 元素也可以解决问题，但作者因为遗忘，所以在这里也复盘一下 dom 元素的操作
   1. getElementById()：返回带有指定 ID 的元素
   2. getElementsByTagName()：返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
   3. getElementsByClassName()：返回包含带有指定类名的所有元素的节点列表
2. 现在我们知道如果去用 dom 操作 class 那么需要使用使用 classList 这个属性，他是一个只读属性，返回一个元素的类属性的实时 DOM TokenList 集合 使用 classList 是替代 element.className 作为空格分隔的字符串访问元素的类列表的一种方便的方法
   1. 那么现在可以简单的使用 Element.classList.add("className") 来添加 class
   2. 同理 Element.classList.remove(className) 来移除 class
3. 但在 vue 中我们就不这么用，用 v-model:class={ className:isActiveclass } 当然这个 isActiveclass 是一个响应式变量，通过更改他的 true 和 false 来改变 class 的存在与否，那么最后举个例子来写一下

<!-- :class 是 v-model:class 的简写 -->
<div class="className1" :class="{ className2:isActiveclass }">
巴拉巴拉巴拉......
</div>

const className2 = ref(true)

最后可以是看见这个 div 是存在两个 class 分别是 className1、className2 那么到这基本就没什么问题了，这次主要就是笔者本人忘了引入数组之后，遍历对其做一些操作的时候需要对他进行响应式化，ok，那么这次问题写到这，有什么问题或者错误，可以在下面评论中提出并且斧正，谢谢