有几种版本可以供大家参考：
第一种方法是看尚硅谷的视频的笔记加上自己添加的一些内容。
第二种方法是看其它文章总结记录下来的，方便自己以及给大家使用。
第一种：
视频地址：028_尚硅谷Vue技术_条件渲染_哔哩哔哩_bilibili
（看完相信大家都可以懂这两个的区别）
v-if：
写法跟 if else 语法类似
v-if="表达式"
v-else-if="表达式"
v-else
适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除
特点：不展示的DOM元素直接被移除。
如果开始条件为false则什么都不做，只有为true才会编译。
注意：v-if 可以和 v-else-if v-else 一起使用，但要求结构不能被打断
v-show：
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display：none）。
在任何情况下都会被编译，然后被缓存，而且dom元素会被保留。
注意：
使用 v-if 时，元素可能无法获取到，而使用 v-show 一定可以获取到；
template标签不影响结构，页面html中不会有此标签，但只能配合 v-if，不能配合 v-show。
第二种：
●手段:
v-if 是动态的向DOM树内添加或者删除DOM元素;
v-show 是通过设置DOM元素的display样式属性控制显隐;
●编译过程:
v-if 切换有-个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件; v-show 只是简单的基于css切换;
●编译条件:
v-if 是惰性的，如果初始条件为假，则什么也不做;只有在条件第一次变为真时才开始局部编译;
v-show 是在任何条件下，无论首次条件是否为真，都被编译,然后被缓存，而且DOM元素保留;
●性能消耗:
v-if 有更高的切换消耗;
v-show 有更高的初始渲染消耗;
●使用场景:
v-if 适合运营条件不大可能改变（即切换频率低）;
v-show 适合频繁切换（即切换频率高）
ok，最后，希望大家还是可以看一下视频，然后自己动手试一下，然后你就啥也都懂了。
贵在理解，理解了，都不需要怎么去用力记。