vue2-v-if和v-for的优先级是什么?

1、v-if和v-for的区别
在这里插入图片描述
作用:
v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染。
v-for指令基于一个数组来渲染一个列表,v-for指令需要使用item in items 形式的特殊语法,其中,items是源数据数组或者对象,而item则是被迭代的数组元素的别名。
在v-for的时候,建议设置key值,并且保证每一个key值是独一无二的,这便于diff算法进行优化。
用法上:
在这里插入图片描述
优先级:
v-if与v-for都是vue模板中的命令
在vue编译的时候,会将指令系统转化成可执行的render函数。
示例:编写一个p标签,同时使用v-if与v-for
在这里插入图片描述
创建vue实例,存放isShow与items数据
在这里插入图片描述
模板指令的代码都会生成在render函数中,通过挨app.$options.render就能得到渲染函数
在这里插入图片描述
_l是vue的列表渲染函数,函数内部都会进行一次if判断

初步得到结论:v-for优先级比v-if高

再将v-for和v-if置于不同的标签
在这里插入图片描述
再输出下render函数,在这里插入图片描述
这时候我们看到,v-for与v-if作用在不同的标签的时候,是先进行判断,再进行列表的渲染。
vue中的源码位置在\vue-dev\src\complier\codegen\index.js

在这里插入图片描述
在进行if判断的时候,v-for是比v-if先进行判断的。
结论:v-for的优先级比v-if优先级要高

注意事项:
1、永远不要把v-if和v-for同时用在同一个元素上,以免带来性能的浪费(每次渲染都会先循环再进行条件判断)
2、如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。
在这里插入图片描述
3、如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/76181.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试怎么做?测试工具怎么选择?

在当前软件测试行业,熟练掌握性能测试已经是测试工程师们面试的敲门砖了,当然还有很多测试朋友们每天的工作更多的是点点点,性能方面可能也只是做过简单的并发测试,对于编写脚本,搭建环境方面也比较陌生。今天这篇文章…

vue3搭建(vite+create-vue)

目录 前提条件 输入命令 对于Add an End-to-End Testing Solution nightwatch和Cypress 和 Playwright 运行 前提条件 熟悉命令行已安装 16.0 或更高版本的 Node.js (node -v查看版本) 输入命令 npm init vuelatest 这一指令将会安装并执行 create-…

NVIDIA 535.86.05 Linux 图形驱动程序改进 Wayland 支持

导读NVIDIA公司近日发布了适用于 Linux、FreeBSD 和 Solaris 系统的 NVIDIA 535.86.05 图形驱动程序,作为其生产分支的维护更新,解决了各种错误和问题。 NVIDIA 535.86.05 是在 NVIDIA 535.54.03 发布一个多月之后发布的,它通过解决在使用某…

PSO粒子群优化算法

PSO粒子群优化算法 算法思想matlab代码python代码 算法思想 粒子群算法(Particle Swarm Optimization) 优点: 1)原理比较简单,实现容易,参数少。 缺点: 1)易早熟收敛至局部最优、迭代后期收敛速度慢的…

linux 文件的权限

修改文件的权限 我这里有一个test.txt 文件,我们ll 查看一下该文件相应的属性信息 其中,权限的位置是相对固定的即: 第一个位置是r 权限,代表可读权限。 第二个位置是w权限,代表可修改权限。 第三个位置是x权限&…

SSL 证书过期巡检脚本 (Python 版)

哈喽大家好,我是咸鱼 之前写了个 shell 版本的 SSL 证书过期巡检脚本 (文章:《SSL 证书过期巡检脚本》),后台反响还是很不错的 那么今天咸鱼给大家介绍一下 python 版本的 SSL 证书过期巡检脚本 (完整代码…

本地mvn仓库清理无用jar包

背景 开发java时间久了,本地的m2仓库就会产生很多过期的jar包,不清理的话比较占空间。 原理 是通过比较同一目录下,对应jar包的版本号的大小,保留最大版本号那个,删除其他的。 脚本 执行脚本见文章顶部 执行方式 …

mac使用mvn下载node-sass 会Binary download failed, trying source

m1 上使用nvm 以下node的版本可以直接下载(Binary download,而不是 trying source)而不用切换mac cpu架构 zhiwenwenzhiwenwendeMBP cockpit % nvm install 14.15.5 Downloading and installing node v14.15.5... Downloading https://node…

华为云hcip核心知识笔记(存储服务规划)

云上存储 : 云硬盘:基于分布式架构,可弹性扩展的虚拟块存储服务 注意事项 挂载云硬盘实例和云硬盘必须在同一区域,否则挂载失败文件存储服务:完全托管的共享文件存储 可以为多个实例实现共享访问,不同vpc中可以进行对…

网络工程师 快速入门

需要掌握 以下技术 1.网络 基础 知识 TCP/IP 、OSI 7层协议、IP地址、ARP地址解析协议、ICMP(英特网控制报文协议,ping)等 入门面试常问问题。 2.路由 路由匹配 三原则、静态路由、OSPF路由协议。 2.交换 如何放数据? VLAN TRU…

【《快速构建AI应用——AWS无服务器AI应用实战》——基于云的解决方案快速完成人工智能项目的指南】

基于云的人工智能服务可以自动完成客户服务、数据分析和财务报告等领域的各种劳动密集型任务。其秘诀在于运用预先构建的工具,例如用于图像分析的Amazon Rekognition或用于自然语言处理的AWS Comprehend。这样,就无须创建昂贵的定制软件系统。 《快速构…

Windows搭建Snort环境及使用方式

目录 0x01 前置环境0x02修改配置文件0x03 自测0x04 使用0x05 感言 0x01 前置环境 环境描述windows10snort2.9.2https://www.snort.org/downloads 先把上面环境下载好! 需要注意的是安装npcap这个软件 0x02修改配置文件 软件安装目录:C:/Snort/ 配置文…

Mac电脑怎么使用“磁盘工具”修复磁盘

我们可以使用“磁盘工具”的“急救”功能来查找和修复磁盘错误。 “磁盘工具”可以查找和修复与 Mac 磁盘的格式及目录结构有关的错误。使用 Mac 时,错误可能会导致意外行为,而重大错误甚至可能会导致 Mac 彻底无法启动。 继续之前,请确保您…

SpringBoot3---核心特性---2、Web开发I

星光下的赶路人star的个人主页 如果我们总是等待绝对的一切就绪,那我们将永远无法开始 文章目录 1、WebMvcAutoConfiguration1.1 生效条件1.2 效果1.3 WebMvcConfigure接口1.4 静态资源规则代码1.5 EnableWebMvcConfiguration源码1.6 为什么容器中放一个WebMvcConfi…

Go 微服务开发框架 DMicro 的设计思路

Go 微服务开发框架 DMicro 的设计思路 DMicro 源码地址: Gitee:dmicro: dmicro是一个高效、可扩展且简单易用的微服务框架。包含drpc,dserver等 背景 DMicro 诞生的背景,是因为我写了 10 来年的 PHP,想在公司内部推广 Go, 公司内部的组件及 rpc 协议…

Ubuntu服务器ELK部署与实践

文章目录 1. Docker安装2. 拉镜象2.1 ElastciSearch2.2 Kibana2.3 logstash 3. 数据展示 1. Docker安装 看之前的文章 docker ubuntu完全卸载docker及再次安装 Ubuntu安装 Docker 此外,Docker偶尔会出现这种问题dial tcp: lookup registry-1.docker.io on 192.168.1…

在 3ds Max 中使用相机映射将静止图像转换为实时素材

推荐: NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 在 Photoshop 中准备图像 步骤 1 这是我将在教程中使用的静止图像。 这是我的静态相机纸箱的快照。 静止图像 步骤 2 打开 Photoshop。将图像导入 Photoshop。 打开 Photoshop 步骤 3 单击套索工…

Python---Numpy

文章目录 1.Numpy是什么?2.ndarray2.1 什么是ndarray?2.2 ndarray的属性2.3 ndarray的类型 3.Numpy基本操作3.1 生成0或1的数组3.2 从现有数组生成数组拓展:浅拷贝和深拷贝 3.3 生成固定范围的数组3.4 生成随机数组3.4.1 正态分布3.4.2 均匀分布 3.5 形…

【HashMap原理解析】

HashMap面试问题 集合概述单列集合双列集合HashTableProperties HashMap底层数据结构哈希表哈希冲突拉链法开放定址法 红黑树红黑树定义红黑树非红黑树 红黑树的插入链表和红黑树在HashMap中的体现 HashMap的扩容机制HashMap初始化HashMap扩容先添元素后扩容什么情况下扩容怎么…

C语言案例 不重复数字输出--01

题目:有 1、2、3、4 四个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 步骤一:定义程序目标 编写一个C程序,使用1、2、3、4四个数字组成不相同且不重复的三位数,分别显示出来…