溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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指令都可以根據值動態控制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適合條件頻繁切換的情況。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vuejs中v-show和v-if的區別有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
