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 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
js判断是否是手机页面
Mar 17 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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 zip扩展Linux下安装过程分享
2014/05/05 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
node 版本切换的实现
2020/02/02 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
tensorflow实现KNN识别MNIST
2018/03/12 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
pyspark 随机森林的实现
2020/04/24 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
高等教育学专业自荐书
2014/06/17 职场文书
鲁迅故居导游词
2015/02/05 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
Redis性能监控的实现
2021/07/09 Redis
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB