首先我们看一下Vue中文社区说明文档的介绍:

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

这两者在官方文档基础目录中是归档在“条件渲染”这个标签下的，顾名思义，用 v-if 或者 v-show 是可以直观的控制想要显示的内容。

共同点：v-if 和 v-show 都能实现元素的显示隐藏。

但是两者的实现方式是不同的

v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；
v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；
v-if 有更高的切换开销，v-show 切换开销小；
v-if 有配套的 v-else-if 和 v-else，而 v-show 没有；
v-if 可以搭配 template 使用，而 v-show 不行。

测试方法
将下面代码放到工程页面，在”条件“中写入true或者false，打开浏览器查看开发者模式(F12)，在Elements标签中查看二者的区别。
可以发现在满足条件的情况下二者无差，但是不满足条件的情况下，v-if 并未渲染被他包裹的内容，而 v-show 渲染了，只是在内联样式中加入了 display:none 属性。

<div class="myClass" v-if="条件" >
   <!-- 显示内容代码 -->
</div>
<div class="myClass" v-show="条件" >
   <!-- 显示内容代码 -->
</div>