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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
简单分析js中的this的原理
Aug 31 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
python中实现栈的三种方法
2020/12/19 Python
python drf各类组件的用法和作用
2021/01/12 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
GWebs公司笔试题
2012/05/04 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
前台文员我鉴定
2014/01/12 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
李培根演讲稿
2014/05/22 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android