v if與v show 動態顯示dom元素

2021-10-11 19:12:26 字數 543 閱讀 5872

(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適合頻繁切換。

v if與v show的區別?

在切換v if塊時,vue.js 有乙個區域性編譯 解除安裝過程,因為v if之中的模板也可能包括資料繫結或子元件。v if是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件 和子元件。v if也是惰性的 如果在初始渲染時條件為假,則什麼也不做 在條件第一次變為真時才開始區...

v show 與 v if 的區別

1.v if 是真正的條件渲染,預設條件為false時元素不渲染,預設條件為true時元素渲染。條件變為false時元素會銷毀,條件變為true時元素會重新建立。而 v show 只是簡單的去控制元素的css的display屬性。2.v show 有更高的初始渲染開銷 因為不管預設條件為真還是假,都...

v if與v show的區別

v if指令與v show指令都可以根據值動態控制dom元素顯示隱藏,v if和v show屬於vue的內部常用的指令,指令的職責是當表示式的值改變時把某些特殊的行為應用到dom上。v if指令用於條件性地渲染一塊內容,這塊內容只會在指令的表示式返回truthy值的時候被渲染。show hide v...