VUE中的v-if與v-show區(qū)別介紹
1.共同點(diǎn)
都是動(dòng)態(tài)顯示DOM元素
2.區(qū)別
- （1）手段：v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱；
- （2）編譯過程：v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡(jiǎn)單的基于css切換；
- （3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時(shí)候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
- （4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
- （5）使用場(chǎng)景：v-if適合運(yùn)營(yíng)條件不大可能改變；v-show適合頻繁切換。
Tips：如果v-show作用的元素，css文件中display:none，通過v-show進(jìn)行設(shè)置不能顯示該元素；
原因：v-show控制顯隱，是通過js代碼去修改元素的element style，如果value為false，設(shè)置display: none;如果value為true，設(shè)置display: ''；于是value為true時(shí)，只能將element style中的display效果清除，并不能覆蓋css中的display效果；
如下圖所示，value=true時(shí)，v-show改變的是element.style，由于無效，顯示效果由css文件中的display決定。
解決辦法：使用v-show的話，在vue解析之前隱藏DOM的話，盡量在style屬性里面設(shè)置display的值，不要在css文件中。
<ul v-touch:tap="message=2" style="display: none" v-show="show">
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解處理Vue單頁面應(yīng)用SEO的另一種思路，本文主要針對(duì) vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
在vue3項(xiàng)目中實(shí)現(xiàn)國(guó)際化的代碼示例
國(guó)際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue.directive()的用法和實(shí)例 ,需要的朋友可以參考下2018-03-03
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下2023-10-10
vue可視化大屏實(shí)現(xiàn)無線滾動(dòng)列表飛入效果
本文主要介紹了vue可視化大屏實(shí)現(xiàn)無線滾動(dòng)列表飛入效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過來的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08
Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解
這篇文章主要為大家介紹了Vue應(yīng)用qs插件實(shí)現(xiàn)參數(shù)格式化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色
這篇文章主要介紹了Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色，本文詳細(xì)的介紹了解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介的是?Vue中如何使用?class?類樣式的方法，在vue中為我們提供了幾種方式來使用class類的樣式，分別是布爾值、表達(dá)式、多類封裝、下面來看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下2021-11-11