Vue动态添加class可能带来的问题解读(被覆盖)
更新时间：2024年12月26日 10:24:10 作者：木有名字就是最好的名字
文章讨论了在使用Vue.js时,通过动态class修改元素样式时可能会遇到的问题,当通过JavaScript动态添加类时,Vue的动态class会覆盖掉通过JavaScript添加的类,导致样式丢失,这个问题在实际开发中可能会遇到,尤其是在使用第三方框架
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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用vue-print-nb打印el-table问题总结,通过实例代码介绍了vue-print-nb 打印功能,本文结合实例代码讲解的非常详细,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了Vue Socket.io源码解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
探通过本篇文章给大家探讨不同场景下组件间的数据“交流”的Vue实现方法，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要为大家详细介绍了Vue2递归组件实现树形菜单的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Mitt是一个轻量级的事件库,可作为Vue3全局事件总线的替代方案,文章介绍了基本使用方法和高级用法,并对比了Mitt与Vue原生通信方式的差异,建议谨慎使用事件总线,感兴趣的朋友跟随小编一起看看吧2026-01-01
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧2021-06-06
这篇文章主要介绍了Vue动态组件component的深度使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
记录一下自己最近开发vue3.0的小小问题,下面这篇文章主要给大家介绍了关于vue3输入框生成的时候如何自动获取焦点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
vue3+vite中使用import.meta.glob的操作代码
在vue2的时候，我们一般引入多个js或者其他文件，一般使用 require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下2022-11-11
Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。2017-03-03
最新评论