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+iview实现分页及查询功能
Nov 17 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue3不同环境下实现配置代理
May 25 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基础知识:函数基础知识
2006/12/13 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python递归全排列实现方法
2018/08/18 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python如何安装第三方模块
2020/05/28 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
电脑教师的自我评价
2013/12/18 职场文书
大学活动策划书范文
2014/01/10 职场文书
家长会邀请书
2014/01/25 职场文书
采购主管岗位职责
2014/02/01 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
企业安全生产标语
2014/06/06 职场文书
新党章心得体会
2014/09/04 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python