VUE中的v-if与v-show区别介绍


Posted in Vue.js onMarch 13, 2022

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决定。

VUE中的v-if与v-show区别介绍

解决办法:使用v-show的话,在vue解析之前隐藏DOM的话,尽量在style属性里面设置display的值,不要在css文件中。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue 实现上传组件
May 31 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
Vue2.0搭建脚手架
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
打架检讨书300字
2014/02/02 职场文书
冬季施工防火方案
2014/05/17 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
安全生产月宣传标语
2014/10/06 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
男方婚前保证书
2015/02/28 职场文书