VUE中的v-if与v-show区别介绍
更新时间：2022年03月13日 16:59:14 作者：Young Dreamer
这篇文章介绍了VUE中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：如果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单页面应用SEO的另一种思路，本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍，非常具有实用价值，需要的朋友可以参考下2018-11-11
国际化就是指在一个项目中，项目中的语言可以进行切换（中英文切换），那么在实际项目中是如何实现的呢，本文就给大家详细的介绍实现方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue.directive()的用法和实例 ,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了如何通过Vue3实现简单的九宫格抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下2023-10-10
本文主要介绍了vue可视化大屏实现无线滚动列表飞入效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
toRef和toRefs可以用来复制reactive里面的属性然后转成 ref,它保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,本文介绍Vue3中toRef和toRefs的区别和用法,需要的朋友可以参考下2024-08-08
这篇文章主要为大家介绍了Vue应用qs插件实现参数格式化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
Element Table的row-class-name无效与动态高亮显示选中行背景色
这篇文章主要介绍了Element Table的row-class-name无效与动态高亮显示选中行背景色，本文详细的介绍了解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue中的路由跳转(返回、刷新、跳转)方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介的是 Vue中如何使用 class 类样式的方法，在vue中为我们提供了几种方式来使用class类的样式，分别是布尔值、表达式、多类封装、下面来看看文章的详细介绍内容吧,需要的朋友可以参考一下2021-11-11
最新评论