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
猜你喜欢
- UDPUDP是面向无连接的通讯协议,UDP数据包括目的端口号和源端口号信息,由于通讯不需要连接,所以可以实现广播发送。 UDP传输数据时有大
- 思路:队列使用说明:multiprocessing.Queue()#用于进程间通信,单主进程与子进程无法通信(使用进程池时尽量不要使用这个)
- 只要为pycharm配置anaconda中的解析器即可。操作步骤:1. 在pycharm菜单栏中,点击File-Settings-Proje
- Go语言的内置函数 copy() 可以将一个数组切片复制到另一个数组切片中,如果加入的两个数组切片不一样大,就会按照其中较小的那个数组切片的
- 一、字典、元组的多重嵌套例 1:记录全班学生的成绩。分析:定义一个 SimpleGradebook类,学生名是字典self._grades的
- 本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考,具体如下:<!doctype html>&l
- 引言现在已经产生了一种新职业:Prompt Engineer(提示指令工程师),可见 Prompt 是多么重要,且编写不易。ChatGPT的
- RPA流程自动化过程中,遇到时间的相关操作时,可以调用datetime库的一些方法进行处理。datetime 是 Python 处理日期和时
- QZONE平台的相册功能为保证加载速度一直以来以简洁的图片排列查看模式呈现相片,随着市场上各类相册产品推陈出新,用户越来越强烈的要求个人相册
- 在开始部分,请看官非常非常耐心地阅读下面几个枯燥的术语解释,本来这不符合本教程的风格,但是,请看官谅解,因为列位将来一定要阅读枯燥的东西的。
- 前言一向用Python 3,最近研究微信公众号开发,各云平台只支持Python 2.7,想用其他版本需要自己搭建环境。而网上又搜不到Pyth
- 所谓的CSV(逗号分隔值)格式是电子表格和数据库最常用的导入和导出格式。尝试使用CSV格式进行标准化描述之前已经使用了很多年。该csv模块r
- JavaScript中有很多内部属性和方法,在大多数情况下,只有JavaScript引擎才可以访问,但不论什么都是有特例的,在这里就是指Mo
- 前言之前实践了下face++在线人脸识别版本,这回做一下离线版本。github 上面有关于face_recognition的相关资料,本人只
- 事情的起因是帮助一个朋友写一个程序,来控制他们单位的铃声,平时竟然是手动打铃(阔怕)事情的第一步:理清思路。需要用到python的几个知识:
- 算法简介鸡群算法,缩写为CSO(Chicken Swarm Optimization),尽管具备所谓仿生学的背景,但实质上是粒子群算法的一个
- 1.前言JavaWeb Struts2的 * 我们都能很熟悉,在请求交给Action处理之前,先在 * 中处理,处理完之后再交给Action
- 本文实例为大家分享了python实现转盘效果的具体代码,供大家参考,具体内容如下#抽奖 面向对象版本import tkinterimport
- 存储过程功能的优点为什么要使用存储过程?以下是存储过程技术的几大主要优点:预编译执行程序。SQL Server只需要对每一个存储过程进行一次
- 一、前言基于Mediapipe+Opencv实现手势检测,想实现一下姿态识别的时候,感觉手势识别也蛮重要的就过来顺便实现一下。下面是一些国内