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