v-if 跟 v-show 的区别

v-show 指令： 根据表达式之真假值，切换元素的 display css 属性。

注意：一般值适用布尔类型，不过其他类型的值也没有问题，不过要注意类型的转换。

v-if 指令： 通过表达式的值来控制元素是否渲染 （v-if=‘xxx’  xxx就是表达式）

v-if 的效果与 v-show 基本一样，但是有区别：

1.v-if: 是真正的数据渲染，默认条件为 false 时元素不渲染，默认条件为 true 时元素渲染；条件为 false 时元素会销毁，条件为 true 时元素会重新创建。

v-show 是简单的的去控制 css 中的 display 属性。

2.v-if 有更高的切换开销 （切换时做销毁和重建的操作）；

v-show 有更高的初始渲染开销（因为不管默认条件为 true 还是 false ，都会渲染出来）；

  如果频繁切换显示隐藏使用功能，用 v-show 更好，其余时间使用 v-if 即可。

3. v-if 有 v-else-if 和 v-else 配套使用；

    v-show 孤零零一个人。

4. v-if 能配合 template 元素使用，而 v-sho 不行；

那么问题来了，为什么 v-show 不能跟与 template 去使用呢？

答：因为 template 是不会渲染出来的， v-show 是要去控制元素的 css 属性的 。