VUE中的v-if與v-show


1.共同點
都是動態顯示DOM元素
2.區別
(1)手段:v-if是動態的向DOM樹內添加或者刪除DOM元素;v-show是通過設置DOM元素的display樣式屬性控制顯隱;
(2)編譯過程:v-if切換有 一個局部編譯/卸載的過程,切換過程中 合適地銷毀和重建內部的事件監聽和子組件;v-show只是簡單的基於css切換;
(3)編譯條件:v-if是惰性的,如果初始條件為假,則什么也不做;只有在 條件第一次變為真時才開始局部編譯編譯被緩存?編譯被緩存后,然后再切換的時候進行局部卸載); 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">
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM