基于 Laravel 的 Vue.js 中文学习教程 —— 条件渲染

v-if

在字符串模板中，例如Handlebars，我们会这样编写一个条件区块：

<!-- Handlebars template -->
{{#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>

v-if 模板

由于 v-if 是一个指令，需要添加到一个元素上，但是如果我们想要在多个元素间切换呢？在本例中我们可以在 <template> 元素上使用 v-if，<template> 作为看不见的包装器，最终结果将不会包含它：

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

v-show

另一个根据条件显示元素的方式是v-show指令，使用方式和v-if差不多：

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

不同之处在于使用v-show的元素会一直渲染并保留在DOM中，v-show只是简单切换元素的CSS属性display。

注意v-show不支持<template>语法。

v-else

你可以使用v-else指令为v-if或v-show添加一个“else区块”：

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

v-else元素必须紧跟在v-if或v-show元素后面，否则将不能被识别。

组件警告

将v-show用于组件时，由于指令优先级问题v-else将不能正常使用，所以不要这么做：

<custom-component v-show="condition"></custom-component>
<p v-else>This could be a component too</p>

将v-else替换成另一个v-show：

<custom-component v-show="condition"></custom-component>
<p v-show="!condition">This could be a component too</p>

这样就可以达到v-if的效果。

v-if vs v-show

在切换 v-if 区块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 里面的模板也可能包括数据绑定或子组件。v-if 是真正的条件渲染，因为它会确保条件区块在切换过程中合适地销毁和重建其中的事件监听器和子组件。

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

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

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