Vue 基礎精講(四)
阿新 • • 發佈：2018-12-04
條件渲染
v-if
在 Vue 中我們可以通過 v-if 指令來判斷是否渲染這個物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的條件渲染</title>
<script src= v-else
我們可以用 v-else 來表示 v-if 的“else塊”
<div v-if="show">{{message}}</div>
<div v-else>Bye World</div>
v-else-if
v-else-if 是 Vue 2.1.0的新增指令，有了他就可以連續使用“else-if”
<div v-if="show === 'a'" var vm = new Vue({
el: "#app",
data: {
show: "a"
}
})
用 key 管理可複用的元素
Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。所以當你的兩個元素是完全獨立的，需要新增 key 來告訴 Vue 不要複用他們
<div v-if="show">
使用者名稱：<input key="username">
</div>
<div v-else>
郵箱名：<input key="email">
</div>
v-show
v-show 的元素始終會被渲染並保留在 DOM 中。 v-show 只是簡單地切換元素的 CSS 屬性 display
<div v-show="show">{{message}}</div>
v-if vs v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。直到條件第一次變為真時，才會開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。