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

Vue | Vue 中的 refInForde 用法

news 2025/11/10 11:38: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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/11/7 14:02:20

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/10/30 5:06:46

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/10/22 9:33:26

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/8 7:49:49

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/11/10 0:07:04

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34