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文件中。

<ul v-touch:tap="message=2" style="display: none" v-show="show">


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容