深刻理解vue.js中的v-if和v-show

本文主要介绍vue.js中v-if和v-show的相关内容，并分享给大家参考。我们来看看详细的介绍：

1.共同点

是动态显示的DOM元素

2.差异

(1)意味着：v-if动态地在DOM树中添加或删除DOM元素；V-show通过设置DOM元素的显示样式属性来控制显示和隐藏；

(2)编译过程：v-if切换有本地编译/卸载过程，在切换过程中对内部事件监控和子组件进行了适当的销毁和重构；V-show只是基于css切换；

(3)编译条件：v-if为惰性，如果初始条件为假，则不做任何事情；只有当条件第一次为真时(编译被缓存？编译缓存后，切换时再进行部分卸载)；V-show在任意条件下编译(不管第一个条件是否成立)，然后缓存，保留DOM元素；

(4)性能消耗：v-if具有较高的开关消耗；V-show具有较高的初始渲染消耗；

(5)使用场景：v-if适合工况，不太可能改变；V-show适合频繁切换。

提示：(1)如果v-show作用的元素在css文件中是display:none，则v-show设置时不能显示；

原因：v-show控制显示和隐藏，就是通过js代码修改元素的元素样式。如果值为false，则将display:设置为none如果值为真，则设置display:因此，当value为true时，只能清除元素样式中的显示效果，不能覆盖css中的显示效果；

如下图所示，当value=true时，v-show改变element.style，由于无效，显示效果由css文件中的显示决定。

解决方法：

使用v-show时，如果在vue解析前隐藏DOM，尽量在style属性中设置display的值，不要在css文件中设置。ul v-touch : tap=' message=2 ' style=' display : none ' v-show=' show '

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。