v show和v if有何異同?

2021-10-12 03:56:18 字數 924 閱讀 9906

v-show

用於根據條件展示元素

帶有v-show指令的元素始終會被渲染並保留在 dom 中。v-show只是簡單地切換元素的 css propertydisplay

注意,v-show不支援元素,也不支援v-else。 

2. v-if

v-if是「真正」的條件渲染,因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建 

v-if也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。

相比之下,v-show就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 css 的display屬性 進行切換。

3.同:

二者都是基於條件來渲染元素 

4.不同:

由於v-if在根據條件切換時,會操作dom元素,所以v-if有更高的切換開銷,而v-show有更高的初始渲染開銷,之後就是基於css 的display屬性 進行切換,相對來說,開銷小。

因此,如果需要非常頻繁地切換,則使用v-show較好;

如果在執行時條件很少改變,則使用v-if較好。

結論就是:v-if是動態建立和刪除,v-show是動態隱藏和顯示 

v if和v show的異同點

v if和v show都能控制元素的顯示和隱藏。1.實現方法 v if 動態的向dom樹內新增或者刪除dom元素 v show 通過設定css中的display設定為none,控制隱藏 2.編譯過程 v if 有乙個區域性編譯 解除安裝的過程,切換過程中合適地銷毀和重建內部的事件監聽和子元件 v s...

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 就簡單得多 不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 ...