vue-if和vue-show的区别,vue v if v show

　　本文介绍了VUE v-if和v-show的区别，对大家的学习或工作有一定的参考价值。有需要的朋友下面跟边肖学习。

1.共同点

　　是动态显示DOM元素

2.区别

　　(1) Means: 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秀适合频繁切换。温馨提示：如果v-show所代理的元素在css文件中有display:none，通过v-show设置就无法显示；

　　原因：v-show控制显示和隐藏，是通过js代码修改一个元素的元素样式。如果值为false，则设置display:none；如果值为true，设置显示：“”；因此，当值为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

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。