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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
简单介绍django提供的加密算法
2019/12/18 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
入党积极分子介绍信
2014/01/17 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
学生保证书范文
2014/04/28 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书