首頁 >web前端 >Vue.js >vuejs中v-show和v-if的差別是什麼

vuejs中v-show和v-if的差別是什麼

區別：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的差異

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適合條件頻繁切換的情況。