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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Vue实现多页签组件
Jan 14 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python实现控制台打印的方法
2019/01/12 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
组工干部对照检查材料
2014/08/25 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
安全保证书
2015/01/16 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python