深入理解vue.js中的v-if和v-show
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
1.共同点
都是动态显示DOM元素
2.区别
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
Tips： （1）如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；
原因：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；于是value为true时，只能将element style中的display效果清除，并不能覆盖css中的display效果；
如下图所示，value=true时，v-show改变的是element.style，由于无效，显示效果由css文件中的display决定。
解决办法：
使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。 <ul v-touch:tap="message=2" style="display: none" v-show="show">
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
- VUE中的v-if与v-show区别介绍
- vue 条件渲染v-if和v-show
- Vue常用指令v-if与v-show的区别浅析
- 如何区分vue中的v-show 与 v-if
- 简单了解vue中的v-if和v-show的区别
- vue中的v-if和v-show的区别详解
- vue中v-show和v-if的异同及v-show用法
- vue使用v-if v-show页面闪烁,div闪现的解决方法
- Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
- vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
- 关于vuejs中v-if和v-show的区别及v-show不起作用问题
- vue学习笔记之v-if和v-show的区别
- Vue.js使用v-show和v-if的注意事项
- Vue.js中v-show和v-if指令的用法介绍
相关文章
这篇文章主要介绍了解决vue eslint开发严格模式警告错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue手机号正则匹配，姓名加密展示,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue2.0与vue3.0及vue与react的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue-froala-wysiwyg 富文本编辑器功能，分步骤给大家介绍了vue3.中如何安装使用froala,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了关于element-ui表单中限制输入纯数字的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue如何根据不同的环境使用不同的接口地址问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧2022-12-12
这篇文章主要为大家详细介绍了Vue3中Composition的一些常见API的用法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
最近在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能,所以下面这篇文章主要给大家介绍了关于Vue移动端实现调用相机扫描二维码或条形码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue组件间的通信,子组件向父组件传值的方式汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论