Vue.js使用v-show和v-if的注意事项


Posted in Javascript onDecember 13, 2016

关于两者的区别,官网是这样说的:

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

下面通过示例来看看在使用v-show与v-if时的注意事项

1、通过Vue.js中v-if指令来判断Vue中某个对象是否为空(该对象与后台传来的json数据绑定),从而判断是否显示分页条,在实际过程中发现,第一次请求后台数据,进行渲染过程后,分页条没有显示,但之后的请求后台数据再渲染,分页条都可正常显示。

问题如图所示:

Vue.js使用v-show和v-if的注意事项

2、原因

查看页面未渲染dom结构,发现上述分页条所在的div,没有出现页面中,这是由于vue组件初始化时,由于list为空导致id为example的div删除了,所以后续分页操作,针对是空dom对象,在第一次渲染结束后,由于list不为空,该div又加到该节点上,所以而后的分页条都可正常显示。

Vue.js使用v-show和v-if的注意事项

3、解决

将v-if指令替换为v-show指令,在条件为真的情况下,v-if将其所在dom及其子dom都删除,而v-show是将该dom加上了“display:none”,使其隐藏了起来。修改代码及效果如下

Vue.js使用v-show和v-if的注意事项

Vue.js使用v-show和v-if的注意事项

使用心得:

对于V-show,V-if如何选择,本人有以下建议:

1、对于管理系统的权限列表的展示,这里可以使用V-if来渲染,如果使用到V-show,对于用户没有的权限,在网页的源码中,仍然能够显示出该权限,如果用V-if,网页的源码中就不会显示出该权限。(在前后台分离情况下,后台不负责渲染页面的场景。)
2、对于前台页面的数据展示,这里推荐使用V-show,这样可以减少开发中不必要的麻烦。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js Math 对象的方法
Sep 01 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 #Javascript
JS实现图片垂直居中显示小结
Dec 13 #Javascript
Javascript this 函数深入详解
Dec 13 #Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 #Javascript
简单实现js浮动框
Dec 13 #Javascript
javascript中this关键字详解
Dec 12 #Javascript
You might like
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
护士专业推荐信
2013/11/02 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
公务员诚信承诺书
2014/05/26 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis