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.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下2021-06-06
详解Vue的computed(计算属性)使用实例之TodoList
本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了详解基于 Nuxt 的 Vue.js 服务端渲染实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的2019-11-11
这篇文章主要介绍了vue自定义实例化modal弹窗,Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些，本文结合实例代码给大家介绍的非常详细，需要的朋友参考下2022-09-09
文章介绍了如何在Vue组件的`onMounted`生命周期钩子中获取`movable-area`和`movable-view`组件的实例,从而计算出可滑动的距离,示例代码展示了这一过程,感兴趣的朋友跟随小编一起看看吧2025-02-02
如果你写过vue，对v-bind这个指令一定不陌生。 下面小编将从源码层面去带大家剖析一下v-bind背后的原理,需要的小伙伴可以参考下面章的具体内容2021-09-09
SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式,在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,本文将给大家介绍Vue3中引入、封装和使用svg矢量图的实现示例,需要的朋友可以参考下2024-07-07
最新评论