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