Vue指令v-if、v-show的区别？

首先，v-if 和 v-show 都是 vu e框架内部的指令。都可以实现代码块（元素）的在页面是否显示

原理

v-if：是根据条件真假，决定是否将元素渲染到我们的DOM树上

v-show：是根据条件真假，通过css的display:none属性，来隐藏掉我们的代码块（元素）。

优缺点

v-if

优点：在初次页面渲染时，如果条件不满足（为假），不会渲染，缩短了整体DOM的渲染时间。

缺点：切换显示时，还需要重新渲染DOM，耗能高，此时用户体验度比v-show较差些。

v-show

优点：切换显示时，不会再重新渲染DOM，耗能低，用户体验度更高些。

缺点：在初次渲染页面时，会将所有的代码块（元素）渲染完成，根据条件，判断是否显示的DOM树上。

适应场景

v-if： 代码块（元素）较多，且用户不需要频繁点击切换时，使用v-if

v-show： 代码块（元素）较少，且用户会频繁的点击切换，使用v-show