Question

v-if

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ，我们使用 v-if 指令实现同样的功能：

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

也可以用 v-else 添加一个 "else" 块：

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

<template> 中 v-if 条件组

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别。

v-else-if

2.1.0 新增

The v-else-if, as the name suggests, serves as an "else if block" for v-if. It can also be chained multiple times:

<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>

Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

Controlling Reusable Elements with key

Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. For example, if you allow users to toggle between multiple login types:

<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 address">
</template>

Then switching the loginType in the code above will not erase what the user has already entered. Since both templates use the same elements, the <input> is not replaced - just its placeholder.

Check it out for yourself by entering some text in the input, then pressing the toggle button:

Username Email Toggle login type </div>

new Vue({ el: '#no-key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } })

This isn't always desirable though, so Vue offers a way for you to say, "These two elements are completely separate - don't re-use them." Just add a key attribute with unique values:

<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 address" key="email-input">
</template>

Now those inputs will be rendered from scratch each time you toggle. See for yourself:

Username Email Toggle login type </div>

new Vue({ el: '#key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } })

Note that the <label> elements are still efficiently re-used, because they don't have key attributes.

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：

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

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

注意 `v-show` 不支持 `` 语法。

v-if vs v-show

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

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

---

原文：http://vuejs.org/guide/conditional.html

---