區別:1、「v-if」是動態的在DOM樹內新增或刪除DOM元素,「v-show」是透過設定DOM元素的display樣式屬性來控制顯隱;2、編譯過程不同;3、編譯條件不同;4、「v-if」的切換消耗量高,「v-show」的初始渲染消耗高等等。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
v-if
指令與v-show
指令都可以根據值動態控制DOM
元素顯示隱藏,v-if
和v-show
屬於Vue
的內部常用的指令,指令的職責是當表達式的值改變時把某些特殊的行為應用到DOM
。
描述
v-if
v-if
#指令用於條件性地渲染一塊內容,這塊內容只會在指令的表達式回傳truthy
值的時候被渲染。
<div v-if="show">show</div> <div v-else>hide</div>
v-show
v-show
指令用法大致一樣,不同的是帶有v-show
指令的元素總是會被渲染並保留在DOM
中,v-show
只是簡單地切換元素的CSS property display
。
<div v-show="show">show</div>
區別
#實作方式: v-if
是動態的向DOM
樹內新增或刪除DOM
元素,v-show
是透過設定DOM
元素的display
樣式屬性控制顯隱。
編譯過程: v-if
切換有一個局部編譯卸載的過程,切換過程中適當地銷毀和重建內部的事件監聽和子元件,v-show
只是簡單的基於CSS
切換。
編譯條件: v-if
是惰性的,如果初始條件為假,則什麼也不做,只有在條件第一次變成真時才開始局部編譯, v-show
是在任何條件下都被編譯,然後被緩存,而且DOM
元素保留。
效能消耗: v-if
有更高的切換消耗,v-show
有更高的初始渲染消耗。
使用場景: v-if
適合條件不太可能改變的情況,v-show
適合條件頻繁切換的情況。
相關推薦:《vue.js教學》
以上是vuejs中v-show和v-if的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!