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 進行自定義處理：
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ù)默認傳入該節(jié)點。
當然，如果你不在 v-for 上使用，只是單純的加入單個 ref ，使用方法和 vue 2 沒有任何區(qū)別。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue運行卡死的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue使用技巧及vue項目中遇到的問題,本文給大家?guī)淼闹皇且徊糠郑罄m(xù)還會持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學習吧2018-06-06
使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04
VantUI封裝自定義Tabbar路由跳轉的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
本文主要介紹了VUE項目自動檢測服務端是否發(fā)布了新版本,通過輪詢方式檢測Vue項目新版本并提示用戶刷新頁面,具有一定的參考價值,感興趣的可以了解一下2025-01-01
淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染
下面小編就為大家分享一篇淺談vue單一組件下動態(tài)修改數(shù)據(jù)時的全部重渲染，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3采用xlsx庫實現(xiàn)本地上傳excel文件功能
這篇文章主要為大家詳細介紹了vue3如何采用xlsx庫實現(xiàn)本地上傳excel文件功能,并且前端解析為Json數(shù)據(jù),感興趣的小伙伴可以了解一下2025-02-02
這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue實現(xiàn)漸變色進度條的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue-electron中修改表格內容并修改樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05