本人已参与「新人创作礼」活动，一起开启掘金创作之路。
v-if和v-show的介绍
v-if
v-if是判断某一个元素是否存在于DOM节点上。
例如👇
通过上面的例子不难发现，v-if判断条件不成功的情况下，元素是不会被挂载在DOM节点上的。
v-show
v-show是决定一个在DOM上的元素，是否显示。
看上面的截图可以发现，v-show判断不成功的情况下，元素是依然挂载在DOM节点上的。只是多加了一个“display:none”属性而已。
v-if和v-show的区别
其实这不是一个什么难题，看了上面的例子不难发现。他们的区别其实就是：v-if是决定元素是否需要生成在DOM节点树上。而v-show所判断的元素是一定在节点树上的，v-show只能决定这个元素是否被显示（换言之，v-show就是决定display的值是否为none）
在不同情况下合理使用v-if和v-show
在什么情况下使用v-if ?
当你的一个元素需要进行v-if的判断次数不高的时候（小于3次）的时候，比如，在初始化显示的时候。很少去触发v-if。只判断1次2次就不会去判断的，那么就用v-if,让这个元素不必挂载在DOM上，减小DOM压力。
但是当我们一个元素需要频繁的出现和消失时候 （比如闪烁效果），这个时候使用v-show的效果会更好。因为在DOM上增删节点，是需要一定成本的，而这个成本相对于添加display这个属性来说，要更高。在频繁的增删DOM节点和频繁的修改display中，明显后者的成本更低。
结论
-
v-if 决定被判断元素是否挂载于DOM节点上
-
v-show 决定被判断元素是否添加display:none
-
在需要频繁显示/隐藏某一个元素的情况下，使用v-show,而当元素显示/隐藏的频率较少的时候，则使用v-if。
欢迎技术沟通，摸鱼聊天～
备注来自掘金～
wx:XXF1096032096
