条件渲染

v-if

在字符串模板中，比如 Handlebards，条件块：

{ {#if ok}}
    <h1>Yes</h1>
{ {/if}}

在Vue中，使用 v-if 指令实现同样的功能：

Yes

也可以添加else块

Yes

No

在

因为 v-if 是一个指令，所以必须将其添加到一个元素之上。但是 如果想要多个元素。可以将

// 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
<div v-if="Math.random()> 0.5">
Now you see me
</div>
<div v-else-if="Math.random()== 0.5">
 Now you don't
</div>
<div v-else>
 Now you don't
</div>

用key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是重头开始渲染。这么做除了会使得vue 变得很快以外。还有一些其它的好处。例如：
如果你允许用户在不同的登录方式之间切换：

<div v-if="loginType==='username'">
    <label>Username</label>
    <input placeholder="Enter your username">
</div>
<div v-else>
    <label>Username</label>
    <input placeholder="Enter your username">
</div>

上述代码中 切换 loginType 将不会清除 用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉–仅仅是替换掉它的placeholder。
这样也不总是符合实际需求，所以Vue 提供了一种方式来表达，这两个元素是独立的，不要复用它们。只需要添加一个具有唯一的值的 key 属性即可：

<div v-if="loginType==='username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
</div>
<div v-else>
    <label>Username</label>
    <input placeholder="Enter your username">
</div key="adminname-key">
    // 注<label> 元素仍然会被高效的利用，因为其没有添加key属性。

v-show

另一个用于根据条件展示元素的选项是v-show 指令。用法大致一样：
&lt；h1 v-show=”ok”>Hello
不同的是带有 v-show 的元素始终会被渲染并保留在DOM 中。 v-show 只是简单的切换元素的 css属性 display。
v-if 是真正的条件渲染，因为他会确保在切换过程中条件快内的事件监听器和子组件适当的被销毁和重建。
v-if 也是惰性的。如果在渲染时条件为假，则什么都不做–直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单的多–不管初始条件是什么，元素总是被渲染，只是简单的基于css 进行切换。
一般来说， v-if 有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 较好； 如果在条件运行时候很少改变。则使用v-if较好。
v-for 比 v-if 具有更高的优先级。