v if 與v show 的區別及使用場景

2021-10-20 17:28:24 字數 459 閱讀 7282

雖然使用 v-if 和 v-show 指令,在頁面呈現效果相同,但是兩者之間確實存在影響和差異。

使用 v-if 隱藏的元素 vue 不會嘗試生成對應的html**;而對於 v-show 指令,則會生成html**,並且讓起 display 值為 none,也就是說當需要隱藏尚未載入的內容時,v-if 指令更好一些

使用 v-if 會有效能開銷,每次插入或者移除元素時都必須要生成元素內部的dom樹,這在某些時候是非常大的工作量。而 v-show 除了在初始建立開銷時之外沒有額外的開銷。如果希望頻繁切換某些內容,則選擇 v-show。

如果元素包含任何,那麼僅使用css隱藏父節點可以使瀏覽器在顯示之前就載入它,這意味著一旦 v-show 變為真值,就可以顯示出來。如果是 v-if 指令,會直到要顯示時才開始載入

說明:以上內容為讀《vue.js快跑:構建觸手可及的高效能web應用》的摘錄 

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...