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中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php中curl使用指南
2015/02/05 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
php实现中文转数字
2016/02/18 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
BootStrap中
2016/12/10 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
JS document对象简单用法完整示例
2020/01/14 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python实现SMTP邮件发送
2020/06/16 Python
python中的对数log函数表示及用法
2020/12/09 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
会计电算化大学生职业规划书
2014/02/05 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书