vue中v-show和v-if的异同及v-show用法
作者:不败王者 发布时间:2023-07-02 17:09:11
一、官方解释:
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用法,希望对大家有所帮助
来源:https://www.cnblogs.com/liutianzeng/p/10978890.html
猜你喜欢
- Numpy是高性能科学计算和数据分析的基础包,里面包含了许多对数组进行快速运算的标准数学函数,掌握这些方法,能摆脱数据处理时的循环。1.首先
- 一、前言作为一个数据库爱好者,自己动手写过简单的SQL解析器以及存储引擎,但感觉还是不够过瘾。<<事务处理-概念与技术>&
- 本文实例讲述了Python yield的用法。分享给大家供大家参考,具体如下:yield的英文单词意思是生产,刚接触Python的时候感到非
- <%Class Cls_TemplateDim RegDim PageDim CIDDim SIDDim RuleDim Conten
- MySQL是支持在单个查询字符串中指定多语句执行的,使用方法是给链接指定参数: //链接时设定 mysql_real_connect( ..
- 本文采用拉普拉斯算子计算影像的模糊程度,小于阈值的影像被认为是模糊的,从而被移动到专门存放模糊影像的文件夹。本文只使用cv2和shutil库
- python运行问题Traceback (most recent call last)出现报错traceback(most recent c
- 1,不用第三方库# coding: utf-8import loggingBLACK, RED, GREEN, YELLOW, BLUE,
- 前言上一篇介绍了客户端流式RPC,客户端不断的向服务端发送数据流,在发送结束或流关闭后,由服务端返回一个响应。本篇将介绍双向流式RPC。双向
- banner 设计会严重影响广告投放效果,在此建议相关设计人员,在设计FLASH BANNER的时候考虑到以下问题.1.
- 在文章《用CSS实现柱状图(Bar Graph)的方法总结与比较(三)》中我强调说不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们
- 前言本篇博客主要解决在使用pandas绘制图像并保存时,由于标签太长,导致坐标轴上的标签显示不全的问题。刚遇到问题时调整了一下图片大小,然鹅
- 目录楔子鼠标操作鼠标监控鼠标键盘监控楔子python是一门很神奇的语言,原因在于它有很多的库可以实现各种意想不到的功能。当然我们这次介绍的库
- 本文实例讲述了ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能。分享给大家供大家参考,具体如下:验证码现在是用户登录、
- 本文实现的原理很简单,优化方法是用的梯度下降。后面有测试结果。先来看看实现的示例代码:# coding=utf-8from math imp
- 本文实例分析了Python作用域用法。分享给大家供大家参考,具体如下:每一个编程语言都有变量的作用域的概念,Python也不例外,以下是Py
- 如下:将html文件下载后,使用BeauifulSoup读取文件,并且使用html.parsertmp_soup.select里面的参数为:
- 随着因特网的发展,在网络环境中,数据库应用渐渐向操作简单、功能实用的方向发展。本文介绍如何利用ASP技术实现对数据库进行在线维护的方法,并给
- 使用使用navicat连接远程linux mysql数据库出现10061未知故障,设置使用ssh连接后出现2013故障本机环境:win10
- 什么是Mosaic数据增强方法Yolov4的mosaic数据增强参考了CutMix数据增强方式,理论上具有一定的相似性!CutMix数据增强