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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
js module大战
Apr 19 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
vue实现购物车列表
Jun 30 Javascript
原生JavaScript实现进度条
Feb 19 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
详解jQuery事件
2017/01/13 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Python ZipFile模块详解
2013/11/01 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
校园之星获奖感言
2014/01/29 职场文书
运输服务质量承诺书
2014/03/27 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python