Vue中v-for和v-if优先级(2、3)

Vue中v-for和v-if优先级(2、3)

Vue2

在Vue2当中,v-for优先级要优于v-if,也就是说,当它俩同时沿用时,v-for先遍历,v-if再判断。

Vue2源码位置

\vue-dev\src\compiler\codegen\index.js

export function genElement (el: ASTElement, state: CodegenState): string {if (el.parent) {el.pre = el.pre || el.parent.pre}if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)} else if (el.once && !el.onceProcessed) {return genOnce(el, state)} else if (el.for && !el.forProcessed) {return genFor(el, state)} else if (el.if && !el.ifProcessed) {return genIf(el, state)} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {return genChildren(el, state) || 'void 0'} else if (el.tag === 'slot') {return genSlot(el, state)} else {// component or element...
}

Vue3

在Vue3当中,v-if优先级要大于v-for,也就是说,当循环和判断同时在一个节点时,那么先判断再遍历。

总结

因为这种风格上的差异,所以尽量不要在一个子节点同时使用v-for和v-if。

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

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

相关文章

如何构建数据驱动的企业?爬虫管理平台是关键桥梁吗?

一、数据驱动时代:为何选择爬虫管理平台? 在信息爆炸的今天,数据驱动已成为企业发展的核心战略之一。爬虫管理平台,作为数据采集的第一站,它的重要性不言而喻。这类平台通过自动化手段,从互联网的各个角落…

windows的远程桌面连接docker

1. Docker容器中运行远程桌面服务 (RDP):您的Docker容器需要安装和运行远程桌面服务。通常,远程桌面服务在Windows操作系统上可用。如果您使用的是Linux容器,则需要安装一个支持RDP协议的桌面环境和RDP服务器。 2. 开放RDP端口:通…

什么是RPC?有哪些RPC框架?

定义 RPC(Remote Procedure Call,远程过程调用)是一种允许运行在一台计算机上的程序调用另一台计算机上子程序的技术。这种技术屏蔽了底层的网络通信细节,使得程序间的远程通信如同本地调用一样简单。RPC机制使得开发者能够构建分…

【常见开源库的二次开发】一文学懂CJSON

简介: JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript的一个子集,但是JSON是独立于语言的,这意味着尽管JSON是由JavaScript语法衍生出来的,它可以被任何编程语言读取和生成…

Django 实现子模版继承父模板

背景 Django的占位符,如果不继承父模板的内容,会被子模版所覆盖,有些业务场景子模版也需要使用到父模板中的内容 可以使用Django自带的标签{% block super %}来实现此效果 base.html 最基础html,相当于第一层html,bl…

代码随想录算法训练营day76 | Floyd 算法精讲、A * 算法精讲

本次题目来自于卡码网 ​​97. 小明逛公园 (Floyd 算法精讲) 1、确定dp数组以及下标的含义 grid[i][j][k] m,表示 节点i 到 节点j 以[1...k] 集合为中间节点的最短距离为m 2、确定递推公式 分两种情况: 节点i 到 节点j 的最…

01 | 基础架构:一条SQL查询语句是如何执行的?

此系列文章为极客时间课程《MySQL 实战 45 讲》的学习笔记! 引言 在了解 SQL 查询语句如何执行之前,先了解下MySQL 的基本架构示意图。 MySQL 分为 Server 层和引擎层。 Server 层包括连接器、查询缓存、分析器、优化器、执行器等,涵盖 M…

微球无菌筛分技术的巅峰之作:纳维加特PV系列

在医药行业中,对微球的制备和筛分要求极高,纳维加特(Navector)凭借其自主创新的PV系列微球无菌旋振筛,成功突破这一领域的技术壁垒。该产品不仅拥有高效率、高精度的筛分能力,同时还兼顾了高卫生级别的要求…

uniapp自动升级

一、创建云服务空间(https://unicloud.dcloud.net.cn) 云空间用于关联需要版本控制升级的项目,如果已拥有云空间则省略此步骤。 二、搭建 uni升级中心 - 后台管理系统(升级中心 uni-upgrade-center - Admin) uni-adm…

Linux调试器-gdb使用以及Linux项目自动化构建工具-make/Makefile

目录 1.gdb背景2.开始使用gdb3.make/makefile 背景4.实例代码5.依赖关系6.依赖方法7.原理8.项目清理 1.gdb背景 程序的发布方式有两种,debug模式和release模式 Linux gcc/g出来的二进制程序,默认是release模式 要使用gdb调试,必须在源代码生…

c++的makeFile怎么做

makeFile30分钟 1 介绍(makeFile是什么,30分钟入门搞懂)2 为什么要用makeFile3 如何制作makeFile文件?4 参考 makeFile真的很简单,不要想的一下子全都学懂了,先入门了,然后在实践中去使用&#…

Apache部署与配置

概述 介绍 Apache HTTP Server(简称Apache)是Apache的一个开源的网页服务器,它源自NCSAhttpd服务器,并经过多次修改和发展,如今已经成为全球范围内广泛使用的Web服务器软件之一 特点 跨平台:可以运行在几乎所有广泛使用的计算机平…

36 特殊类设计

类,不能被拷贝 拷贝只会放生在两个场景中:拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝。 c98 将拷贝构造函数与赋值云悬浮重载只声明不定义,并且将其访问权限设置为私有 class CopyBan{// ...private:CopyBan(co…

Apache中使用SSI设置

先停服务在修改httpd.conf,备份下 Apache\Apache24\conf 设置httpd.conf LoadModule ssl_module modules/mod_ssl.so 取消该命令前的注释符# AddType text/html .shtml AddOutputFilter INCLUDES .shtml 取消该命令前的注释符# 加入html AddType text/html .…

在 Kotlin 中,`@JvmOverloads` 注解用于为具有默认参数值的函数生成重载方法

在 Kotlin 中,JvmOverloads 注解用于为具有默认参数值的函数生成重载方法。这个注解在你需要从 Java 代码调用 Kotlin 函数时特别有用,因为 Java 不支持默认参数值。 下面是一个例子,说明 JvmOverloads 的工作原理: Kotlin 代码…

前端javascript中的排序算法之插入排序

插入排序(Selection Sort)基本思想: 插入排序每次排一个数组项,以此方式构建最后的排序数组。假定第一项已经排序了,接着, 它和第二项进行比较,第二项是应该待在原位还是插到第一项之前呢&#…

软件工具网站推荐

1.菜鸟工具 菜鸟工具 - 不止于工具菜鸟工具,为开发设计人员提供在线工具,网址导航,提供在线PHP、Python、 CSS、JS 调试,中文简繁体转换,进制转换等工具。致力于打造国内专业WEB开发工具,集成开发环境&…

详细谈谈负载均衡的startupProbe探针、livenessProbe探针、readnessProbe探针如何使用以及使用差异化

文章目录 startupProbe探针startupProbe说明示例配置参数解释 使用场景说明实例——要求: 容器在8秒内完成启动,否则杀死对应容器工作流程说明timeoutSeconds: 和 periodSeconds: 参数顺序说明 livenessProbe探针livenessProbe说明示例配置参数解释 使用…

CSS技巧专栏:一日一例 1.纯CSS实现 会讨好的热情按钮 特效

题外话: 从今天开始,我准备开设一个新的专栏,专门写 使用CSS实现各种酷炫按钮的方法,本专栏目前准备写40篇左右,大概会完成如下按钮效果: 今天,我来介绍第一个按钮的实现方法:会讨好的热情按钮。为什么我给它起这样的名字呢?你看它像不像一个不停摇尾巴的小黄?当你鼠…

【QML之·基础语法概述】

系列文章目录 文章目录 前言一、QML基础语法二、属性三、脚本四、核心元素类型4.1 元素可以分为视觉元素和非视觉元素。4.2 Item4.2.1 几何属性(Geometry):4.2.2 布局处理:4.2.3 键处理:4.2.4 变换4.2.5 视觉4.2.6 状态定义 4.3 Rectangle4.3.1 颜色 4.4…