5、条件渲染

---

title: 5、条件渲染
date: 2017-07-31 19:50:10
tags: vue笔记(妙味)

---

v-if

在vue中使用v-if实现判断

<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

另一个用于根据条件展示元素的是v-show指令，用法大致一样

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

show不支持<template>语法，而且v-show的元素始终会被渲染并保留在DOM中，v-show只是简单的切换元素的display属性。

v-if和v-show比较

1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。

2. v-if也是有惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件。

3. 相比之下，v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单的基于css进行切换。

4. 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁的切换，则使用v-show比较好，如果运行时条件不太可能改变，则使用v-if比较好。