v-show和v-if的区别

v-show可以写在dom标签中，可以根据表达式的true还是false来判断是否显示该标签的内容

v-show是通过css属性的display来控制是否显示的，不删除元素

v-show：

在所写的代码中

按住f12选择样式，display被划掉了，元素被显示了

 当display勾选的时候，元素不显示了

 

所以v-show更适合用于频繁的切换  -》 只修改了css样式，减少了其他消耗

v-show有更高的初始渲染消耗  -》无论表达式是true还是false，v-show的元素都被渲染了

v-if：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件;

v-if是惰性的，条件第一次变为真时才开始局部编译;

 在上述代码中，执行如下图

 当我们点击的时候，可以看到div元素中的内容发生了变化

 把标签换成v-show试试呢

 当我们点击测试if

 可以看到div元素还是存在的，是在多了一个display的样式

总结：当元素在页面切换频繁时，使用v-show，当元素在页面只进行较少的变化次数时，使用v-if