条件渲染
v-if
demo:
<div v-if="ok">如果ok为true，将会渲染这个div，如果为false，将会渲染v-else绑定的html</div> <div v-else>如果ok的值为false，这个div将会被渲染</div>
<template>中v-if条件组
因为v-if是一个指令，需要将它添加到一个元素上。但是如果我们想要切换多个元素呢？此时我们可以把一个<template>元素当做包装元素，
并在上面使用v-if。最终的渲染结果不会包含<template>元素。
<template v-if="ok"> <h1>title</h1> <p>pargraph 1</p> <p>pargraph 2</p> </template>
可以使用v-else指令来表示v-if的'else 块'：
<template v-if="ok"> <h1>title</h1> <p>pargraph 1</p> <p>pargraph 2</p> </template> <div v-else">ok is false</div>
v-else-if
新增，v-else-if ,顾名思义，充当v-if的‘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-if="type==D"> D </div> <div v-else> Not A/B/C/D </div>
类似于v-else,v-else-if必须紧跟在v-if或者v-else-if元素之后。
用 key 管理可复用的元素
Vue会尽可能高效地渲染元素，通常会复用已有的元素，而不是从头开始渲染。这么做，除了使Vue变得非常快之外，还有一些有用的好处。
<template v-if="loginType=='username'"> <label>username</label> <input placeholder='Enter your username'> </template> <template v-else> <label>email</label> <input placeholder='Enter your email'> </template>
那么在上面的代码中切换loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素（Vue通常会复用已有的元素），<input>不会被替换掉--仅仅是替换了它的placeholder
这样也不总是符合实际需求，所以Vue提供了一种方式来声明“这两个元素是完全独立的---不要复用它们”。只需添加一个具有唯一值的key属性即可：
<template v-if="loginType=='username'"> <label>username</label> <input placeholder='Enter your username' key="username-input"> </template> <template v-else> <label>email</label> <input placeholder='Enter your email' key="email-input"> </template>
这样切换输入方式时，input就不会复用，但是<label>元素任然会被高效地复用，因为它们没有添加key属性。
v-show
另一个用于根据条件展示元素的选项是v-show指令，用法大致一样：
<h1 v-show="ok">hello!</h1>
不同的是带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单的切换元素的css属性 display
v-if 与v-show
v-if是真正的条件渲染，因为它会确保在切换过程中条件块内事件监听器和子组件适当的销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不会做，直到条件第一次变成真，才会开始渲染条件块。
相比之下，v-show就简单的多----不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。
一般来说，v-if有更多的切换开销，而v-show又更高的初始渲染开销。因此，如果需要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
v-if与v-for一起使用
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
