Vue動態(tài)添加class可能帶來的問題解讀(被覆蓋)
Vue動態(tài)添加class可能帶來的問題
使用vue的伙伴相信都會使用動態(tài)class方便修改元素樣式，
也就是下面這種
通過控制flag 的 true / false 來決定addClass 這個類是否生效
當然，如果需求僅僅如上述圖片所述，是不會出現什么問題的
現在有一個額外的dom操作
為span 動態(tài)添加了一個類（此處 后面會著重說明場景）
例如：
為他添加一個 red 類：
下面是addRedClass方法：(this as any) 是為了解決vue3 + ts 使用$refs 報錯問題 不是本章的重點，
重點在于：
通過js dom操作為span元素添加.red類樣式
methods:{
addRedClass(){
(this as any).$refs['span'].classList.add('red')
}
}以下為 vue動態(tài)class 會覆蓋掉 通過dom操作添加的class樣式 的復現
默認狀態(tài)：
點擊 第二個按鈕 （js 為span添加類名為red的class） ：
當點擊第一個按鈕 （vue動態(tài)class）
到這里，可以發(fā)現 通過js 添加的red類。 在點擊vue動態(tài)class按鈕后，被覆蓋掉了，自然 red的樣式也消失了， 這顯然不是我們期待的結果，我們期待的結果應該是 同時出現
class=“static red addClass”
三種情況才對
問題復現完畢
現在是解釋剛剛紅字提到的內容：
在日常開發(fā)中，既然使用vue 開發(fā) 其實很少情況會 自己手動 通過js 使用dom 為元素添加class，但是我們除了使用vue開發(fā)，還會使用一些第三方 框架輔助， 例如bootstrap等，
這些框架 可能在他本身 會通過js 操作dom 元素為其添加class 從而達到 一些樣式效果，而vue 動態(tài)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動態(tài)組件component的深度使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
記錄一下自己最近開發(fā)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