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