Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
更新時間：2023年03月24日 11:22:25 作者：咲奈
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue 2
在 vue 2 中，如果給 v-for 綁定一個 ref ，通過這個 ref 可以獲取到全部 v-for 的節(jié)點。
HTML
<div id='app'>
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
</div>
JS
data() {
return {
renderData: [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' },
{ name: 'f' }
]
}
},
mounted() {
console.log(this.$refs.nodes)
}
從而可以獲得所有 v-for 的節(jié)點數(shù)組：
所以你可以在自定義觸發(fā)事件中將索引傳入，就可以在 this.$refs.nodes[index] 中獲取觸發(fā)事件的那個 dom 。
Vue 3
在 vue 3 中，對 v-for 的一體化（數(shù)組化）處理已經(jīng)取消，變?yōu)楹瘮?shù)處理 ref 。
如果你像 vue 2 中綁定：
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
此時通過 this.$refs.nodes 只能獲取遍歷的最后一個節(jié)點 dom 。
如果要實現(xiàn) vue 2 相同的數(shù)組，你可以對 ref 進(jìn)行自定義處理：
HTML
<div>
<p v-for="item in renderData" :key="item.name" ref="handleNodes">{{item.name}}</p>
</div>
JS
data() {
return {
nodes: []
}
},
methods: {
handleNodes(el) {
this.nodes.push(el)
}
}
也就是說 ref 的處理方式變?yōu)榱撕瘮?shù)，這個函數(shù)默認(rèn)傳入該節(jié)點。
當(dāng)然，如果你不在 v-for 上使用，只是單純的加入單個 ref ，使用方法和 vue 2 沒有任何區(qū)別。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Nuxt.js SSR與權(quán)限驗證的實現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗證的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue2和vue3實現(xiàn)圖片懶加載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項目中常用的富文本插件，其功能能滿足大部分的項目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
最近工作中遇到了報錯,現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報錯的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了前端token中4個存儲位置的優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時間內(nèi)重復(fù)進(jìn)行接口請求，重復(fù)發(fā)送多次請求，本文主要介紹了Vue中Axios中取消請求及阻止重復(fù)請求的方法，感興趣的可以了解一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
在vue+element ui框架里實現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實現(xiàn)lodash的debounce防抖，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11