前言
当我们想要条件性的渲染模板内容的时候，我们可以通过v-if这个指令来实现，当指令里面的表达式返回真值时进行渲染。如果你熟悉vue开发的话，你会发现这个指令非常好用，而且在某些场景下，能起到很好的优化效果。
template
通常情况下，我们会把v-if指令应用在某个标签上。但是如果我们有多个节点都要用到这个指令的时候，我们就可以把这些放在template标签中，把v-if应用在template标签上，而且最后渲染的时候并不会包含template标签的。
<template v-if="value"> <h1>小马</h1> <p>小米</p> <p>小红</p> </template> 复制代码
v-show
vue中还提供了一个指令，能达到和v-if一样的展示效果：
<h1 v-show="value">Hello!</h1> 复制代码
不过，二者区别在于，
v-show的切换只是在元素上加上一个display的css属性，也就意味着其DOM元素会保留。还有一点需要注意的是，v-show不支持在<template>元素上使用。
v-if vs v-show
v-if指令的切换并不会保留DOM元素，其自身以及包括的内容的事件监听器等内容都会被销毁以及重建。
还有一点是，当v-if的初始值为 false时，并不会渲染。所以，根据这一点，我们可以根据自己的场景，适当用v-if来优化页面初次渲染的逻辑。
综上，你可以区分，二者的主要区别。那么我们如何区分它的应用场景呢？
对于v-if来说，频繁切换的话，会带来更多的切换开销。而相应的， v-show 也会带来更高的初始渲染开销。
所以，如果需要频繁切换， v-show 食用更佳。而如果在运行时绑定条件很少改变，则 v-if 会更合适。
