深入理解vue.js中的v-if和v-show

更新時間：2017年06月22日 09:57:26 作者：Young Dreamer

這篇文章主要給大家深入的介紹了關于vue.js中v-if和v-show的相關資料，文中詳細介紹兩者的共同點和區(qū)別，通過圖文介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

本文主要給大家介紹了關于vue.js中v-if和v-show的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：

1.共同點

都是動態(tài)顯示DOM元素

2.區(qū)別

（1）手段：v-if是動態(tài)的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱；

（2）編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監(jiān)聽和子組件；v-show只是簡單的基于css切換；

（3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；

（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

（5）使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。

Tips： （1）如果v-show作用的元素，css文件中display:none，通過v-show進行設置不能顯示該元素；

原因：v-show控制顯隱，是通過js代碼去修改元素的element style，如果value為false，設置display: none;如果value為true，設置display: ''；于是value為true時，只能將element style中的display效果清除，并不能覆蓋css中的display效果；

如下圖所示，value=true時，v-show改變的是element.style，由于無效，顯示效果由css文件中的display決定。

解決辦法：

使用v-show的話，在vue解析之前隱藏DOM的話，盡量在style屬性里面設置display的值，不要在css文件中。 <ul v-touch:tap="message=2" style="display: none" v-show="show">

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

解決vue?eslint開發(fā)嚴格模式警告錯誤的問題
這篇文章主要介紹了解決vue?eslint開發(fā)嚴格模式警告錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue手機號正則匹配姓名加密展示功能的實現(xiàn)
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue2.0與vue3.0及vue與react的區(qū)別及說明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue-froala-wysiwyg 富文本編輯器功能
這篇文章主要介紹了vue-froala-wysiwyg 富文本編輯器功能，分步驟給大家介紹了vue3.中如何安裝使用froala,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
關于element-ui表單中限制輸入純數(shù)字的解決方式
這篇文章主要介紹了關于element-ui表單中限制輸入純數(shù)字的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中mixins混入的介紹與使用詳解
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2022-12-12
Vue3中Composition的API用法詳解
這篇文章主要為大家詳細介紹了Vue3中Composition的一些常見API的用法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
2023-06-06
Vue移動端實現(xiàn)調用相機掃描二維碼或條形碼的全過程
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關于Vue移動端實現(xiàn)調用相機掃描二維碼或條形碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
vue組件間的通信,子組件向父組件傳值的方式匯總
這篇文章主要介紹了vue組件間的通信,子組件向父組件傳值的方式匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03