6. v-if

v-if 主要用来做条件判断，Vue 会根据表达式的值的真假条件来渲染元素，在切换时元素及它的数据绑定，组建将被销毁并重建。

<template v-if="ok">

<h1>title</h1>

<p>content 1</p>

</template>

7. v-else

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

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

<a v-else>No</a>

8. v-else-if

v-else-if 元素必须紧跟在 v-if 或者 v-else-if 后面，否则将不会被识别，可用来实现 switch 语句。

<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="type === 'c'">No A/B/C</div>

9. v-show

v-show 是简单地切换元素的 CSS 属性 display， 不支持 <template> ，也不支持 v-else，而 v-if 是“真正的”条件渲染。v-show 有更高的初始渲染开销，而 v-if 有更高的切换开销。故，若要频繁地切换，则使用 v-show；若在运行时条件不太可能改变，则使用 v-if。

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