vue3中ref动态绑定的技巧详解
更新时间：2024年01月14日 11:24:48 作者：梁青竹
这篇文章主要为大家详细介绍了vue3中ref动态绑定的相关技巧,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
平常时候绑定ref
<script> const tempRef = ref<HTMLElement>() </script> <template> <div ref='tempRef'></div> </template>
在一些场景需要动态绑定ref， ref设置是未知的需要根据动态数据来决定，那么我们需要定义一个对象进行存储绑定的ref，例：
<script>
interface DataItem {
id:string,
name:string
}
const dataList:DataItem[] = [
{
id="1",
name:'标题1'
},
{
id="2",
name:'标题2'
},
{
id="3",
name:'标题3'
}
]
const tempRefs = ref({} as any);
const handleSetTempMap = (el: Element, item: DataItem)=>{
if (el) {
tempRefs.value[`temp_{item.id}`] = el;
}
}
</script>
<template>
<div v-for="item in dataList" :key="item.id"
:ref="(el:Element) => handleSetTempMap(el, item)"
>
</div>
</template>
到此这篇关于vue3中ref动态绑定的技巧详解的文章就介绍到这了,更多相关vue3 ref动态绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
文章介绍了如何在代理服务器中配置axios请求,包括单个接口和多个接口的情况,通过配置proxy,可以将请求转发到不同的后端服务器,并且可以处理跨域请求和路径重写2025-12-12
vue前端crud(页面布局、新增及vue中反向代理)图文详解
Vue.js是一款轻量级的前端框架,具有响应式的数据绑定和组件化的开发方式,适合构建用户界面,这篇文章主要介绍了vue前端crud(页面布局、新增及vue中反向代理)的相关资料,需要的朋友可以参考下2026-02-02
这篇文章主要介绍了vue实现登录功能的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
vue中手动封装iconfont组件解析(三种引用方式的封装和使用)
这篇文章主要介绍了vue中手动封装iconfont组件(三种引用方式的封装和使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue 3 + Element Plus 封装单列控制编辑的可编辑表格
在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧2024-09-09
在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue如何在无后端配合的情况下实现导出功能,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起了解一下2024-01-01
vue自定义密码输入框解决浏览器自动填充密码的问题(最新方法)
这篇文章主要介绍了vue自定义密码输入框解决浏览器自动填充密码的问题,通过将密码输入框的type设置为text，修改样式上的显示，来实现既可以让浏览器不自动填充密码，又可以隐藏密码的效果，需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
最新评论