Vue動態(tài)添加class可能帶來的問題解讀(被覆蓋)
Vue動態(tài)添加class可能帶來的問題
使用vue的伙伴相信都會使用動態(tài)class方便修改元素樣式，
也就是下面這種
通過控制flag 的 true / false 來決定addClass 這個類是否生效
當(dāng)然，如果需求僅僅如上述圖片所述，是不會出現(xiàn)什么問題的
現(xiàn)在有一個額外的dom操作
為span 動態(tài)添加了一個類（此處 后面會著重說明場景）
例如：
為他添加一個 red 類：
下面是addRedClass方法：(this as any) 是為了解決vue3 + ts 使用$refs 報錯問題 不是本章的重點(diǎn)，
重點(diǎn)在于：
通過js dom操作為span元素添加.red類樣式
methods:{
addRedClass(){
(this as any).$refs['span'].classList.add('red')
}
}以下為 vue動態(tài)class 會覆蓋掉 通過dom操作添加的class樣式 的復(fù)現(xiàn)
默認(rèn)狀態(tài)：
點(diǎn)擊 第二個按鈕 （js 為span添加類名為red的class） ：
當(dāng)點(diǎn)擊第一個按鈕 （vue動態(tài)class）
到這里，可以發(fā)現(xiàn) 通過js 添加的red類。 在點(diǎn)擊vue動態(tài)class按鈕后，被覆蓋掉了，自然 red的樣式也消失了， 這顯然不是我們期待的結(jié)果，我們期待的結(jié)果應(yīng)該是 同時出現(xiàn)
class=“static red addClass”
三種情況才對
問題復(fù)現(xiàn)完畢
現(xiàn)在是解釋剛剛紅字提到的內(nèi)容：
在日常開發(fā)中，既然使用vue 開發(fā) 其實(shí)很少情況會 自己手動 通過js 使用dom 為元素添加class，但是我們除了使用vue開發(fā)，還會使用一些第三方 框架輔助， 例如bootstrap等，
這些框架 可能在他本身 會通過js 操作dom 元素為其添加class 從而達(dá)到 一些樣式效果，而vue 動態(tài)class 卻會覆蓋掉本該 為bootstrap提供效果的class，從而出現(xiàn)一些 難以預(yù)料的bug
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)戰(zhàn)中的一些實(shí)用小魔法匯總
這篇文章主要給大家介紹了關(guān)于vue實(shí)戰(zhàn)中一些實(shí)用小魔法的相關(guān)資料,這些技巧和竅門,可以幫助你成為更好的Vue開發(fā)人員,需要的朋友可以參考下2021-06-06
詳解Vue的computed(計算屬性)使用實(shí)例之TodoList
本篇文章主要介紹了詳解Vue的computed(計算屬性)使用實(shí)例之TodoList，具有一定的參考價值，有興趣的可以了解一下2017-08-08
Vue基于localStorage存儲信息代碼實(shí)例
這篇文章主要介紹了Vue基于localStorage存儲信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實(shí)踐
這篇文章主要介紹了詳解基于 Nuxt 的 Vue.js 服務(wù)端渲染實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
VuePress 由兩部分組成：一個以 Vue 驅(qū)動的主題系統(tǒng)的簡約靜態(tài)網(wǎng)站生成工具，和一個為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它是為了支持 Vue 子項(xiàng)目的文檔需求而創(chuàng)建的2019-11-11
vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?nbsp;Vue.component寫法使用 extend 步驟要更加繁瑣一些，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下2022-09-09
基于uniapp?vue3?的滑動搶單組件實(shí)例代碼
文章介紹了如何在Vue組件的`onMounted`生命周期鉤子中獲取`movable-area`和`movable-view`組件的實(shí)例,從而計算出可滑動的距離,示例代碼展示了這一過程,感興趣的朋友跟隨小編一起看看吧2025-02-02
如果你寫過vue，對v-bind這個指令一定不陌生。 下面小編將從源碼層面去帶大家剖析一下v-bind背后的原理,需要的小伙伴可以參考下面章的具體內(nèi)容2021-09-09
Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例
SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項(xiàng)目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例,需要的朋友可以參考下2024-07-07