vue3中ref動(dòng)態(tài)綁定的技巧詳解
更新時(shí)間：2024年01月14日 11:24:48 作者：梁青竹
這篇文章主要為大家詳細(xì)介紹了vue3中ref動(dòng)態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下
平常時(shí)候綁定ref
<script> const tempRef = ref<HTMLElement>() </script> <template> <div ref='tempRef'></div> </template>
在一些場(chǎng)景需要?jiǎng)討B(tài)綁定ref， ref設(shè)置是未知的需要根據(jù)動(dòng)態(tài)數(shù)據(jù)來(lái)決定，那么我們需要定義一個(gè)對(duì)象進(jìn)行存儲(chǔ)綁定的ref，例：
<script>
interface DataItem {
id:string,
name:string
}
const dataList:DataItem[] = [
{
id="1",
name:'標(biāo)題1'
},
{
id="2",
name:'標(biāo)題2'
},
{
id="3",
name:'標(biāo)題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>
到此這篇關(guān)于vue3中ref動(dòng)態(tài)綁定的技巧詳解的文章就介紹到這了,更多相關(guān)vue3 ref動(dòng)態(tài)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計(jì)算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過(guò)代碼講解非常詳細(xì),需要的朋友可以參考下2024-01-01
進(jìn)入Hooks時(shí)代寫(xiě)出高質(zhì)量react及vue組件詳解
這篇文章主要介紹了Hooks時(shí)代中如何寫(xiě)出高質(zhì)量的react和vue組件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹vue.js Router嵌套路由,平時(shí)訪問(wèn)首頁(yè),里面有新聞?lì)惖?home/news,還有信息類的/home/message這時(shí)候就需要使用到嵌套路由,下面我們就來(lái)具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
這篇文章主要介紹了vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄,文中是小編記錄的三個(gè)坑及解決方案，需要的朋友可以參考下2018-04-04
vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解
這篇文章主要介紹了vscode配置vue下的es6規(guī)范自動(dòng)格式化詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-12-12
解決Vue開(kāi)發(fā)中對(duì)話框被遮罩層擋住的問(wèn)題
在Vue的開(kāi)發(fā)中，一旦我們用到對(duì)話框，經(jīng)常出現(xiàn)的問(wèn)題是對(duì)話框被遮罩層擋住,怎么來(lái)解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了Vue開(kāi)發(fā)中對(duì)話框被遮罩層擋住的問(wèn)題及解決方法，一起看看吧2018-11-11