Vue基礎-條件渲染

多一點開心發表於2020-10-10

一、v-if

真正的條件渲染,確保在切換過程中條件塊內的事件監聽器和子元件適當的被銷燬和重建,但他是有惰性的如果初始渲染條件為假,則什麼都不做直到第一次條件為真才開始渲染條件塊.
在這裡插入圖片描述
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面,否則它將不會被識別。類似於 v-else,v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

二、v-show

不管初始條件是什麼,條件總是會被渲染,但是隻是簡單地基於css切換

三、v-if和v-show的區別

在這裡插入圖片描述
總結
v-if有更高的切換開銷,v-show有更高的初始渲染開銷,因此如果需要非常頻繁的切換建議使用v-show,反之使用v-if

四、用key管理可複用的元素

輸入郵箱名
在這裡插入圖片描述
控制檯改變show的值,郵箱名變成了使用者名稱,但是輸入框沒有清空還保留這上一次的資料
在這裡插入圖片描述
這是因為vue 會盡可能高效地渲染元素,通常會複用已有元素而不是從頭開始渲染,為了解決這個問題可以給元素加key值
在這裡插入圖片描述

相關文章