深入理解vue.js中的v-if和v-show
本文主要給大家介紹了關(guān)于vue.js中v-if和v-show的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：
1.共同點(diǎn)
都是動(dòng)態(tài)顯示DOM元素
2.區(qū)別
（1）手段：v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素；v-show是通過(guò)設(shè)置DOM元素的display樣式屬性控制顯隱；
（2）編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件；v-show只是簡(jiǎn)單的基于css切換；
（3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時(shí)候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
（5）使用場(chǎng)景：v-if適合運(yùn)營(yíng)條件不大可能改變；v-show適合頻繁切換。
Tips： （1）如果v-show作用的元素，css文件中display:none，通過(guò)v-show進(jìn)行設(shè)置不能顯示該元素；
原因：v-show控制顯隱，是通過(guò)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，由于無(wú)效，顯示效果由css文件中的display決定。
解決辦法：
使用v-show的話(huà)，在vue解析之前隱藏DOM的話(huà)，盡量在style屬性里面設(shè)置display的值，不要在css文件中。 <ul v-touch:tap="message=2" style="display: none" v-show="show">
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- VUE中的v-if與v-show區(qū)別介紹
- vue 條件渲染v-if和v-show
- Vue常用指令v-if與v-show的區(qū)別淺析
- 如何區(qū)分vue中的v-show 與 v-if
- 簡(jiǎn)單了解vue中的v-if和v-show的區(qū)別
- vue中的v-if和v-show的區(qū)別詳解
- vue中v-show和v-if的異同及v-show用法
- vue使用v-if v-show頁(yè)面閃爍,div閃現(xiàn)的解決方法
- Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法
- vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
- 關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問(wèn)題
- vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
- Vue.js使用v-show和v-if的注意事項(xiàng)
- Vue.js中v-show和v-if指令的用法介紹
相關(guān)文章
解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue手機(jī)號(hào)正則匹配姓名加密展示功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue手機(jī)號(hào)正則匹配，姓名加密展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue-froala-wysiwyg 富文本編輯器功能，分步驟給大家介紹了vue3.中如何安裝使用froala,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式
這篇文章主要介紹了關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue3中Composition的一些常見(jiàn)API的用法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的全過(guò)程
最近在使用vue開(kāi)發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue組件間的通信,子組件向父組件傳值的方式匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03