当前位置： 首页 > news >正文

Vue | Vue 中的 refInForde 用法

news 2025/9/15 9:19:32

refInFor：如果你在渲染函数中给多个元素都应用了相同的 ref 名，那么 `$refs.myRef` 会变成一个数组。

vue中的refInFor属性是Vue框架中用于在循环渲染的元素上设置引用的一种方式。‌

在Vue中，‌ref属性通常用于给元素或子组件注册引用信息，‌这些引用信息会注册在父组件的$refs对象上。‌如果是在普通的DOM元素上使用，‌引用指向的就是DOM元素；‌如果是在子组件上，‌引用就指向组件的实例。‌当在子组件或者DOM元素上写ref="xxx"时，‌Vue实例上就有了一个$refs属性，‌包含了所有注册过ref的DOM对象。‌通过$refs，‌我们可以直接访问到这些DOM元素或子组件实例，‌从而进行直接操作或访问它们的属性和方法。‌

在循环渲染的场景中，‌如果需要在循环内部使用ref来引用某个元素或组件，‌并且希望这个引用在循环外部也是可访问的，‌就需要使用refInFor属性。‌这个属性确保了在循环中设置的引用不会因为每次循环都创建一个新的引用对象而导致无法正确访问。‌通过在循环中的元素上设置ref="someRef"和refInFor属性，‌可以在循环外部通过this.$refs.someRef访问到所有循环中创建的元素或组件的引用集合。‌

这种用法在需要遍历列表并对每个元素进行特定操作时非常有用，‌例如，‌当需要动态地改变列表中某些元素的样式或状态时，‌可以通过refInFor来引用这些元素，‌并在父组件中通过this.$refs来访问和操作它们。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="app"><h1>vue TODO</h1><my-todo v-bind:items="todoList"></my-todo><hr><h2>v-for 和 ref 结合使用</h2><ul><todo ref="li" v-for="(item,i) in todoList" :key="i" :todo="item.do"></todo></ul>
</div>
<template id="tempA"><div><span>{{datas.isa}}</span></div>
</template><script src="vue.min.js"></script>
<script>Vue.component("todo", {props: ["todo"],render(h) {return h("li", this.todo);}});Vue.component("my-todo", {props: ["items"],render(h) {console.log("my-todo");if (this.items.length) {const todo = this.items.map((item) => {return h("todo", {props: { todo: item.do },ref: "ref-li",refInFor: true // 使用map生成一个vNode数组，开启 refInFor: true，this.$refs.["ref-li"] 是一个数组// refInFor 如果不开启，获取到的是最后一个元素或者子组件});});return h("ol", todo);} else {return h("p", "no todo");}},mounted() {// 在父组件中获取注册了 ref 特性的子组件的console.log(`this.$refs["ref-li"]`)console.log(this.$refs["ref-li"]);//数组}});
const app = new Vue({el: "#app",data: {todoList: [{ do: "eat" }, { do: "code" }]},mounted() {console.log("app");console.log("this.$refs.li")console.log(this.$refs.li)}
});
</script>
</body>
</html>

参考资料

Vue官网——API — Vue.js | Vue之render函数_Vue.js——博客园

Vue 中的Render全面详解 (渲染函数&JSX)-CSDN博客 | Vue中的render函数-CSDN博客

轻松掌握 Vue render 函数：简单易懂的使用指南 | Vue中 渲染函数（render）的介绍和应用

vue 中的 render 函数作用详解_vue.js_脚本之家 | Vue render函数使用详细讲解_vue.js_脚本之家

相关文章：

Vue | Vue 中的 refInForde 用法

refInFor&#xff1a;如果你在渲染函数中给多个元素都应用了相同的 ref 名&#xff0c;那么 $refs.myRef 会变成一个数组。 vue中的refInFor属性是Vue框架中用于在循环渲染的元素上设置引用的一种方式。‌ 在Vue中&#xff0c;‌ref属性通常用于给元素或子组件注册引用信息&am…...

编程日记 2024/8/22 23:05:41

【原创】java+swing+mysql房屋租赁管理系统设计与实现

个人主页&#xff1a;程序员杨工 个人简介&#xff1a;从事软件开发多年&#xff0c;前后端均有涉猎&#xff0c;具有丰富的开发经验 博客内容&#xff1a;全栈开发&#xff0c;分享Java、Python、Php、小程序、前后端、数据库经验和实战 文末有本人名片&#xff0c;希望和大家…...

编程日记 2024/8/22 23:02:38

Django 中render、redirect 和 HttpResponse的区别

在 Python 的 Web 框架 Django 中&#xff0c;render, redirect 和 HttpResponse 是用于处理 HTTP 响应的不同函数&#xff0c;它们各自有不同的用途&#xff1a; HttpResponse&#xff1a; HttpResponse 是 Django 中最基本的响应对象&#xff0c;用于返回给客户端的 HTTP 响应…...

编程日记 2024/8/22 22:59:34

CRYPTO 2020

分类文章编号安全模型1-6公钥加密，功能加密，见证加密7-12后量子密码13-20密码分析21-31最佳论文32-34多方安全计算35-49真实应用50-55零知识证明56-62格和相关难题63-68泄露和外包加密69-74非交互式零知识证明，共识和延迟函数75-79构建80-85Security Models 1. Handling Ad…...

编程日记 2024/8/22 22:58:33

java 函数接口Consumer简介与示例【函数式编程】【Stream】

Java 8 中的 消费者接口Consumer 是一个函数接口&#xff0c;它可以接受一个泛型 类型参数&#xff0c;它属于java.util.function包。我们来看看Java函数接口库中的定义&#xff1a; FunctionalInterface public interface Consumer<T> {/*** Performs this operation o…...

编程日记 2024/8/22 22:54:29

黑神话：悟空-配置推荐

显卡推荐&#xff08;按类别整理&#xff09; 1. GTX 10系列、GTX 16系列&#xff1a; 如果希望体验光线追踪&#xff0c;建议根据预算升级到RTX 40系列显卡。对于1080p分辨率&#xff0c;至少需要RTX 4060才能流畅运行。 2. RTX 20系列&#xff1a; RTX 2060、RTX 2070&#…...

编程日记 2024/8/22 22:53:27

Android14 蓝牙设备类型修改

Android14 蓝牙设备类型设置修改设置 文章目录 Android14 蓝牙设备类型设置修改设置一、前言二、修改蓝牙设备类型1、蓝牙设备类型和对应的属性2、Debug设备设置和获取蓝牙设备类型3、系统源码中设置蓝牙设备类型4、Java代码中设置蓝牙prop属性可行吗&#xff1f; 三、其他1、A…...

编程日记 2024/8/22 22:50:25

vue3 语法糖＜script setup＞

在 Vue 3 中&#xff0c;<script setup>是一种新的语法糖&#xff0c;它极大地简化了组件的编写方式。 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。 基本概念 简洁的语法&#xf…...

编程日记 2024/8/22 22:47:22

微服务设计原则——高性能：异步与并发

文章目录 1.异步1.1 调用异步1.2 流程异步1.3 数据流异步1.4 小结 2.并发2.1 请求并发2.2 冗余请求2.3 小结 参考文献 1.异步 对于处理耗时长的任务&#xff0c;如果采用同步等待的方式&#xff0c;会严重降低系统的吞吐量&#xff0c;可以采用异步化进行解决。 异步&#xf…...

编程日记 2024/8/22 22:46:21

机器学习——决策树，朴素贝叶斯

一.决策树 决策树中的基尼系数&#xff08;Gini Index&#xff09;是用于衡量数据集中不纯度&#xff08;或混杂度&#xff09;的指标。基尼系数的取值范围在0到0.5之间&#xff0c;其中0表示数据完全纯&#xff08;同一类别&#xff09;&#xff0c;0.5表示数据完全混杂。 基…...

编程日记 2024/8/22 22:44:19

C语言基础（十）

编译预处理命令&#xff1a; 预编译命令在C语言中用于在编译前进行一些特定的处理和控制&#xff0c;帮助程序员更灵活地管理源代码和控制编译过程。 C语言常用的预编译命令&#xff1a; #include&#xff1a;用于包含头文件&#xff0c;将另一个文件的内容插入到当前文件中…...

编程日记 2024/8/22 22:43:18

人像比对-人证比对-人脸身份证比对-人脸身份证实名认证-人脸三要素对比-实人认证

人脸身份证实名认证是一种基于生物识别技术的身份验证方式&#xff0c;主要依托证件OCR识别技术、活体检测、人脸比对等技术手段&#xff0c;对用户身份信息真实性进行核验&#xff0c;确保用户为真人且为本人。以下是关于人脸身份证实名认证的详细解析&#xff1a; 一、认证流…...

编程日记 2024/8/22 22:42:17

Android 上下滑隐藏显示状态栏

一、DisplayPolicy类中监听滑动事件&#xff0c;然后发送广播事件 Android12类路径&#xff1a; frameworks/base/services/core/java/com/android/server/wm/DisplayPolicy.javamSystemGestures new SystemGesturesPointerEventListener(mUiContext, mHandler,new SystemGest…...

编程日记 2024/8/22 22:41:16

USBCAN-II/II+使用方法以及qt操作介绍

一.USBCAN-II/II介绍 USBCAN-II/II 是一款常用的 USB-CAN 转换器&#xff0c;广泛应用于汽车电子、工业自动化等领域。以下是使用该设备的一般步骤和方法&#xff1a; 1. 硬件连接 连接设备&#xff1a;将 USBCAN-II/II 的 USB 接口连接到计算机的 USB 端口。 连接 CAN 网络…...

编程日记 2024/8/22 22:39:15

笔记-系统规划与管理师-案例题-2022年-IT服务部署实施

【说明】 某大型企业去年信息化投入大&#xff0c;完成了重点核心业务系统的建设。由于应急相应预案制定得不充分并且未开展演练&#xff0c;出现了系统性故障时&#xff0c;部分关键的应用系统不可用且在12小时内未能完成恢复业务&#xff0c;给企业带来了较大损失。 为加强该…...

编程日记 2024/8/22 22:38:13

Kubernetes 清理资源常用的 Kubernetes 清理命

清理特定状态的 Pod&#xff1a; 清理 Evicted 状态的 Pod&#xff1a; kubectl get pods --all-namespaces -o wide | grep Evicted | awk {print $1,$2} | xargs -L1 kubectl delete pod -n清理 Error 状态的 Pod&#xff1a; kubectl get pods --all-namespaces -o wide | g…...

编程日记 2024/8/22 22:35:07

【数据结构初阶】二叉树--基本概念

hello&#xff01; 目录 一、树 1.1 树的概念和结构 1.2 树的相关术语 1.3 树的表示 1.4 树形结构实际应用场景 二、二叉树 2.1 概念和结构 2.2 特殊的二叉树 2.2.1 满二叉树 2.2.2 完全二叉树 2.3 二叉树的存储结构 2.3.1 顺序结构 2.3.2 链式结构 …...

编程日记 2024/8/22 22:34:05

Pytorch添加自定义算子之（12）-开闭原则设计tensorrt和onnxruntime推理语义分割模型

一、开闭原则 开闭原则是SOLID原则中的一个，指的是尽量使用开放扩展，关闭修改的设计原则。 在C++中如何使用开闭原则导出动态库，可以按照以下步骤进行： 定义抽象基类：定义动态库中的抽象基类，该基类应该封装可扩展的接口。 实现派生类：实现基类的派生类，这些派生类将封…...

编程日记 2024/8/22 22:33:04

第二百零九节 Java格式 - Java数字格式类

Java格式 - Java数字格式类 以下两个类可用于格式化和解析数字: java.text.NumberFormatjava.text.DecimalFormat NumberFormat 类可以格式化一个数字特定地区的预定义格式。 DecimalFormat 类可以格式化数字以特定区域设置的自定义格式。 NumberFormat类的 getXXXInstance…...

编程日记 2024/8/22 22:32:03

LSI-9361阵列卡笔记

背景 要将raid0更改为JBOD直通模式 注意的点是要先将raid模式调整为JBOD之后重启机器&#xff0c;即可 备注&#xff1a;转换过程中硬盘中的数据未丢失。 步骤贴图 refer https://zhiliao.h3c.com/questions/dispcont/123250 https://blog.csdn.net/GreapFruit_J/article/…...

编程日记 2024/8/22 22:31:02

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/9/14 11:44:27

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/9/15 5:22:58

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/9/7 2:04:00

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/9/13 0:33:11

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/9/14 15:55:13

LangChain【6】之输出解析器：结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

编程新知 2025/9/8 10:44:26

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

编程新知 2025/7/6 5:46:43