Vue动态添加class可能带来的问题解读(被覆盖)

Vue动态添加class可能带来的问题

使用vue的伙伴相信都会使用动态class方便修改元素样式，

也就是下面这种

通过控制flag 的 true / false 来决定addClass 这个类是否生效

当然，如果需求仅仅如上述图片所述，是不会出现什么问题的

现在有一个额外的dom操作

为span 动态添加了一个类（此处 后面会着重说明场景）

例如：

为他添加一个 red 类：

下面是addRedClass方法：(this as any) 是为了解决vue3 + ts 使用$refs 报错问题 不是本章的重点，

重点在于：

通过js dom操作为span元素添加.red类样式

methods:{
  addRedClass(){
    (this as any).$refs['span'].classList.add('red')
 }
}

以下为 vue动态class 会覆盖掉 通过dom操作添加的class样式 的复现

默认状态：

点击 第二个按钮 （js 为span添加类名为red的class） ：

当点击第一个按钮 （vue动态class）

到这里，可以发现 通过js 添加的red类。 在点击vue动态class按钮后，被覆盖掉了，自然 red的样式也消失了， 这显然不是我们期待的结果，我们期待的结果应该是 同时出现

class=“static red addClass” 

三种情况才对

问题复现完毕

现在是解释刚刚红字提到的内容：

在日常开发中，既然使用vue 开发 其实很少情况会 自己手动 通过js 使用dom 为元素添加class，但是我们除了使用vue开发，还会使用一些第三方 框架辅助， 例如bootstrap等，

这些框架 可能在他本身 会通过js 操作dom 元素为其添加class 从而达到 一些样式效果，而vue 动态class 却会覆盖掉本该 为bootstrap提供效果的class，从而出现一些 难以预料的bug

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。