vue3中ref動態(tài)綁定的技巧詳解
更新時間：2024年01月14日 11:24:48 作者：梁青竹
這篇文章主要為大家詳細介紹了vue3中ref動態(tài)綁定的相關技巧,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解一下
平常時候綁定ref
<script> const tempRef = ref<HTMLElement>() </script> <template> <div ref='tempRef'></div> </template>
在一些場景需要動態(tài)綁定ref， ref設置是未知的需要根據(jù)動態(tài)數(shù)據(jù)來決定，那么我們需要定義一個對象進行存儲綁定的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動態(tài)綁定的技巧詳解的文章就介紹到這了,更多相關vue3 ref動態(tài)綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
文章介紹了如何在代理服務器中配置axios請求,包括單個接口和多個接口的情況,通過配置proxy,可以將請求轉(zhuǎn)發(fā)到不同的后端服務器,并且可以處理跨域請求和路徑重寫2025-12-12
vue前端crud(頁面布局、新增及vue中反向代理)圖文詳解
Vue.js是一款輕量級的前端框架,具有響應式的數(shù)據(jù)綁定和組件化的開發(fā)方式,適合構建用戶界面,這篇文章主要介紹了vue前端crud(頁面布局、新增及vue中反向代理)的相關資料,需要的朋友可以參考下2026-02-02
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue中手動封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應用開發(fā)中實現(xiàn)表格數(shù)據(jù)編輯功能至關重要,本文將詳細介紹如何使用Vue3和ElementPlus庫來構建一個支持單列編輯的表格組件,本教程詳細闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機制,幫助你快速掌握Vue3中表格編輯功能的實現(xiàn),感興趣的朋友一起看看吧2024-09-09
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實現(xiàn)本地文件的存取,需要的小伙伴可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Vue如何在無后端配合的情況下實現(xiàn)導出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題,通過將密碼輸入框的type設置為text，修改樣式上的顯示，來實現(xiàn)既可以讓瀏覽器不自動填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項目組件庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
組件（Component）是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09