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

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

青灯夜游
發布: 2023-01-13 00:45:46
原創
5167 人瀏覽過

區別:1、「v-if」是動態的在DOM樹內新增或刪除DOM元素,「v-show」是透過設定DOM元素的display樣式屬性來控制顯隱;2、編譯過程不同;3、編譯條件不同;4、「v-if」的切換消耗量高,「v-show」的初始渲染消耗高等等。

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

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

v-if與v-show的差異

v-if指令與v-show指令都可以根據值動態控制DOM元素顯示隱藏,v-ifv-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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板