v if和v show的異同點

2021-10-06 06:23:19 字數 503 閱讀 3443

v-if和v-show都能控制元素的顯示和隱藏。

1.實現方法

v-if:動態的向dom樹內新增或者刪除dom元素

v-show:通過設定css中的display設定為none,控制隱藏

2.編譯過程

v-if:有乙個區域性編譯/解除安裝的過程,切換過程中合適地銷毀和重建內部的事件監聽和子元件

v-show:控制css

3.編譯條件

v-if:若初始值為false,就不會編譯了

v-show:都會編譯。初始值為false,只是將display設為none,但也會編譯

4.效能消耗

v-if:切換消耗大

v-show:初始渲染消耗大

5.使用場景

v-if:適合運營條件不大可能改變

v-show:適合頻繁切換節點

v show和v if有何異同?

v show 用於根據條件展示元素 帶有v show指令的元素始終會被渲染並保留在 dom 中。v show只是簡單地切換元素的 css propertydisplay。注意,v show不支援元素,也不支援v else。2.v if v if是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的...

vue中v show和v if的異同

在學習vue的過程中,記錄一下相關知識點!1 v if 是 真正 的條件渲染 因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。2 v if 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。3 v show 類似於css中的displ...

vue中v show和v if的異同

v if 是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。相比之下,v show 就簡單得多 不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 ...