title: 5、條件渲染
date: 2017-07-31 19:50:10
tags: vue筆記(妙味)

v-if

在vue中使用v-if實現(xiàn)判斷

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

上面這種方式只能給一個元素判斷，如果是多個元素可以按照下面的寫法，<template>元素當做包裝元素，但是最終渲染不會包含這個元素。

<template v-if="ok">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</template>

v-else或者v-else-if必須跟在v-if或者v-else-if的后面。

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

htnmlvar vm = new Vue({
    var vm = new Vue({
        el:'#app',
        data: {     // 只打印No和C
            ok: false,
            type: 'C'
        }
})

用key管理可復用元素

這里雖然可以切換輸入用戶名和email，但是每次切換之后input輸入的內容是不變的，改變的只是placeholder的內容，也就是說這兩個input元素并不是相互獨立的

<template v-if="loginType === 'username'">
    <label for="">Username</label>
    <input type="text" placeholder="Enter your username">
</template>
<template v-else>
    <label for="">Email</label>
    <input type="text" placeholder="Enter you mail address">
</template>

有時這樣會比較麻煩，所以Vue提供了一種方式來聲明這兩個元素是完全獨立的，不要復用他們，只需要添加一個具有唯一的key屬性即可

<template v-if="loginType === 'username'">
    <label for="">Username</label>
    <input type="text" placeholder="Enter your username" key="username-input">
</template>
<template v-else>
    <label for="">Email</label>
    <input type="text" placeholder="Enter your email" key="email-input">
</template>

v-show

另一個用于根據(jù)條件展示元素的是v-show指令，用法大致一樣

<h1 v-show="ok">Hello!</h1>

show不支持<template>語法，而且v-show的元素始終會被渲染并保留在DOM中，v-show只是簡單的切換元素的display屬性。

v-if和v-show比較

1. v-if是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當?shù)谋讳N毀和重建。

2. v-if也是有惰性的，如果在初始渲染時條件為假，則什么也不做，直到條件第一次變?yōu)檎鏁r，才會開始渲染條件。

3. 相比之下，v-show就簡單得多，不管初始條件是什么，元素總是會被渲染，并且只是簡單的基于css進行切換。

4. 一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷，因此，如果需要非常頻繁的切換，則使用v-show比較好，如果運行時條件不太可能改變，則使用v-if比較好。