1. template 上的 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-else 和 v-else-if 也可以在 <template> 上使用。
2. v-show
另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：
<h1 v-show="ok">Hello!</h1>
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
3. v-if 与 v-show 的区别(提高性能）
用法上的区别
- v-show是不支持template的
- v-show无法和 v-else 一起使用
本质上的区别
- v-show元素无论是否需要显示到浏览器上，它的DOM是实际存在的，只是通过Css的display属性来进行切换的
- v-if 的 条件为 false的时候，其对应的原生压根不会渲染到DOM中
开发中如何进行选择
- 如果我们的原生需要在现实和隐藏之间频繁切换，使用v-show
- 不会频繁发生切换，使用v-if
