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

Vue | Vue 中的 refInForde 用法

news 2026/3/29 1:06:54

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

YOLOv12与数据库集成：使用MySQL存储检测结果与元数据

YOLOv12与数据库集成&#xff1a;使用MySQL存储检测结果与元数据 1. 引言 想象一下这个场景&#xff1a;你部署了一个YOLOv12模型&#xff0c;用来实时监控仓库的货物进出。摄像头24小时不间断工作&#xff0c;模型每秒都能识别出几十个包裹、叉车和人员。识别结果很准&#…...

编程新知 2026/3/29 0:09:03

无线局域网安全（四）————CCMP加密实战与性能优化

1. CCMP加密的核心原理与AES算法特性 CCMP加密协议作为无线局域网安全的黄金标准&#xff0c;本质上是一套基于AES算法的"安全组合拳"。我常把它比作银行金库的三重门禁系统&#xff1a;第一道门用CTR模式确保数据保密性&#xff0c;第二道门通过CBC-MAC实现完整性校…...

编程新知 2026/3/28 23:48:56

AWS CloudFormation 安全最佳实践终极指南：IAM角色与策略配置完全解析

AWS CloudFormation 安全最佳实践终极指南&#xff1a;IAM角色与策略配置完全解析 【免费下载链接】aws-cloudformation-templates awslabs/aws-cloudformation-templates: 是一个包含各种 AWS CloudFormation 模板的存储库。适合查找和学习 AWS CloudFormation 模板的示例&…...

编程新知 2026/3/28 22:50:16

Python 数据统计分析全攻略：从基础到实战，一文掌握常用方法

在数据分析、机器学习、业务报表开发等场景中&#xff0c;数据统计分析是核心基础环节。Python 凭借丰富的第三方库&#xff0c;成为数据统计分析的首选工具。本文将系统梳理 Python 中数据统计分析的常用方法、核心库、实战代码&#xff0c;从基础统计量到高级分析&#xff0c…...

编程新知 2026/3/28 22:00:01

保姆级教程：在ROS2 Humble和Gazebo 11中配置FAST_LIO_ROS2进行三维SLAM仿真

从零搭建ROS2与Gazebo环境&#xff1a;FAST_LIO_ROS2三维SLAM实战指南 刚接触机器人仿真的开发者常被环境配置的复杂性劝退——依赖冲突、参数配置错误、话题不匹配等问题层出不穷。本文将手把手带您完成ROS2 Humble、Gazebo 11与FAST_LIO_ROS2的完整集成&#xff0c;实现一个可…...

编程新知 2026/3/28 21:55:59

嵌入式开发中PlantUML图表的工程化应用

嵌入式开发中PlantUML图表的工程化应用指南1. 嵌入式文档工具概述在嵌入式系统开发过程中&#xff0c;系统架构图和设计文档是工程师沟通需求、梳理逻辑的核心工具。传统拖拽式绘图工具存在效率低下、维护困难等问题&#xff0c;而基于代码生成图表的PlantUML技术为嵌入式开发文…...

编程新知 2026/3/28 20:09:12

Cogito-V1-Preview-Llama-3B模型微调（Fine-tuning）数据准备入门教程

Cogito-V1-Preview-Llama-3B模型微调数据准备入门教程 你是不是也对那些能写代码、能聊天的AI模型感到好奇&#xff0c;甚至想自己动手&#xff0c;教一个模型学会你的专属技能&#xff1f;比如&#xff0c;让它帮你写特定风格的文案&#xff0c;或者理解你公司内部的业务文档…...

编程新知 2026/3/28 19:49:08

从动漫生成到金融风控：LSGAN损失函数在5个行业的落地对比（附数据集下载）

从动漫生成到金融风控&#xff1a;LSGAN损失函数在5个行业的落地对比 当生成对抗网络&#xff08;GAN&#xff09;遇上最小二乘损失函数&#xff08;LSGAN&#xff09;&#xff0c;会擦出怎样的火花&#xff1f;这个看似简单的数学改进&#xff0c;正在悄然改变多个行业的AI应用…...

编程新知 2026/3/28 19:47:06

HunyuanVideo-Foley 安全与权限管理：企业内网API访问控制实践

HunyuanVideo-Foley 安全与权限管理&#xff1a;企业内网API访问控制实践 1. 企业AI服务的安全挑战 随着AI技术在企业内部的广泛应用&#xff0c;视频处理类API的安全管理成为IT部门的新课题。HunyuanVideo-Foley作为专业的音视频处理工具&#xff0c;在私有化部署场景下需要…...

编程新知 2026/3/28 19:45:05

3步突破AI工具限制：开源解决方案全解析

3步突破AI工具限制&#xff1a;开源解决方案全解析 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro. We have this limi…...

编程新知 2026/3/28 19:30:55