vue中v-show和v-if的异同及v-show用法


Posted in Javascript onJune 06, 2019

一、官方解释:

1.v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

3.相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

4.一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-

show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

二、个人理解:

1.相同点:v-show和v-if都能控制元素的显示和隐藏。

2.不同点:

•实现本质方法不同 ◦v-show本质就是通过设置css中的display设置为none,控制隐藏

◦v-if是动态的向DOM树内添加或者删除DOM元素

•编译的区别 ◦v-show其实就是在控制css
◦v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

•编译的条件 ◦v-show都会编译,初始值为false,只是将display设为none,但它也编译了
◦v-if初始值为false,就不会编译了

•性能 ◦v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
◦注意点:因为v-show实际是操作display:" "或者none,当css本身有display:none时,v-show无法让显示
◦总结:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大)

vue指令之v-show的用法

1、判断谋个元素是否显示或隐藏

<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>

通过接口里的参数list.power是否等于1,如果等于1,则为“true”,否则为“false”,然后v-show指令,等于true的时候显示,false的时候隐藏。

2、三目运算符判断

<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

其实这个也可以简写成第一种形式

<a class="warn" v-show="!item.ai == null" :href="'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai">AI</a>

这样更简单哦

总结

以上所述是小编给大家介绍的vue中v-show和v-if的异同及v-show用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
页面使用密码保护代码
Apr 10 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
vue中的过滤器实例代码详解
Jun 06 #Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 #Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
跟老齐学Python之for循环语句
2014/10/02 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
历史系毕业生自荐信
2013/10/28 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
室内拓展活动方案
2014/02/13 职场文书
网络编辑岗位职责
2014/03/18 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
革命电影观后感
2015/06/18 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技