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

Vue | Vue 中的 refInForde 用法

news 2026/2/8 20:52:43

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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2026/1/24 6:44:11

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35