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 相关文章推荐
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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针对JSON操作实例分析
2015/01/12 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JsChart组件使用详解
2018/03/04 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
纪检干部对照检查材料
2014/08/22 职场文书
运动会新闻稿
2015/07/17 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书