VUE中的v-if与v-show

1.共同点

都是动态显示DOM元素

2.区别

（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

    v-if会对标签进行适当的创建和销毁；而v-show则仅在初始化时加载一次；(v-if有更高的切换消耗)

    v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。

    v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。(v-show有更高的初始渲染消耗)

    使用场景：v-if适合条件不大可能改变的，例如：角色模块的显示隐藏；v-show适合频繁切换,例如：点击显示关闭弹框。

Tips：（1）如果v-show作用的元素，css文件中display:none，通过v-show进行设置true不能显示该元素；

原因：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；只能将element style中的display效果清除，并不能覆盖css中的display效果；

解决办法：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。