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文件中。
<ul v-touch:tap="message=2" style="display: none" v-show="show">