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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JavaScript手机振动API
Jun 11 Javascript
js严格模式总结(分享)
Aug 22 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
three.js 入门案例详解
Jan 23 Javascript
实例讲解Vue.js中router传参
Apr 22 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
Laravel 5框架学习之表单
2015/04/08 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
JS前端加密算法示例
2016/12/22 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
Python实现栈的方法
2015/05/26 Python
Python迭代和迭代器详解
2016/11/10 Python
20个常用Python运维库和模块
2018/02/12 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
公司聘任书模板
2014/03/29 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
国富论读书笔记
2015/06/26 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
高质量“欢迎词”
2019/04/03 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android