Vue.js 学习(6) -- Vue指令之：条件渲染

本节的重点是几个Vue指令：

v-if
v-else
v-else-if
v-show

它们共同的特点，就是都会根据条件，对DOM元素进行渲染。

v-if

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

h1会被渲染当且仅当ok = true。

v-else

可以为v-if后添加一个v-else：

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

这样，如果ok为true，则渲染第一个h1, 否则，渲染第二个h1。

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

v-else-if

v-if…v-else-if…v-else-if…v-else的逻辑和if…else if…else if…else的逻辑很像：

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

这样根据type的值，vue就可以分情况对dom进行渲染。

v-show

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

当OK为true的时候，h1会被显示出来。
于v-if不同的是，有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

另外，注意：注意 v-show 不支持 < template > 语法。

对比：
v-if & v-show

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

v-if & v-for
当与v-for一起使用时，v-for具有比v-if更高的优先级。