vuejs中v-show和v-if的區(qū)別有哪些

這篇文章主要介紹了vuejs中v-show和v-if的區(qū)別有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

區(qū)別：1、“v-if”是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素，“v-show”是通過(guò)設(shè)置DOM元素的display樣式屬性控制顯隱；2、編譯過(guò)程不同；3、編譯條件不同；4、“v-if”的切換消耗高，“v-show”的初始渲染消耗高等等。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

v-if與v-show的區(qū)別

v-if指令與v-show指令都可以根據(jù)值動(dòng)態(tài)控制DOM元素顯示隱藏，v-if和v-show屬于Vue的內(nèi)部常用的指令，指令的職責(zé)是當(dāng)表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到DOM上。

描述

v-if

v-if指令用于條件性地渲染一塊內(nèi)容，這塊內(nèi)容只會(huì)在指令的表達(dá)式返回truthy值的時(shí)候被渲染。

<div v-if="show">show</div>
<div v-else>hide</div>

v-show

v-show指令用法大致一樣，不同的是帶有v-show指令的元素始終會(huì)被渲染并保留在DOM中，v-show只是簡(jiǎn)單地切換元素的CSS property display。

<div v-show="show">show</div>

區(qū)別

• 實(shí)現(xiàn)方式: v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素，v-show是通過(guò)設(shè)置DOM元素的display樣式屬性控制顯隱。

• 編譯過(guò)程: v-if切換有一個(gè)局部編譯卸載的過(guò)程，切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件，v-show只是簡(jiǎn)單的基于CSS切換。

• 編譯條件: v-if是惰性的，如果初始條件為假，則什么也不做，只有在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯， v-show是在任何條件下都被編譯，然后被緩存，而且DOM元素保留。

• 性能消耗: v-if有更高的切換消耗，v-show有更高的初始渲染消耗。

• 使用場(chǎng)景: v-if適合條件不太可能改變的情況，v-show適合條件頻繁切換的情況。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vuejs中v-show和v-if的區(qū)別有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!