Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明
更新时间：2023年03月24日 11:22:25 作者：咲奈
这篇文章主要介绍了Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue 2
在 vue 2 中，如果给 v-for 绑定一个 ref ，通过这个 ref 可以获取到全部 v-for 的节点。
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 的节点数组：
所以你可以在自定义触发事件中将索引传入，就可以在 this.$refs.nodes[index] 中获取触发事件的那个 dom 。
Vue 3
在 vue 3 中，对 v-for 的一体化（数组化）处理已经取消，变为函数处理 ref 。
如果你像 vue 2 中绑定：
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
此时通过 this.$refs.nodes 只能获取遍历的最后一个节点 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 的处理方式变为了函数，这个函数默认传入该节点。
当然，如果你不在 v-for 上使用，只是单纯的加入单个 ref ，使用方法和 vue 2 没有任何区别。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue运行卡死的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下2019-04-04
本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
本文主要介绍了VUE项目自动检测服务端是否发布了新版本,通过轮询方式检测Vue项目新版本并提示用户刷新页面,具有一定的参考价值,感兴趣的可以了解一下2025-01-01
下面小编就为大家分享一篇浅谈vue单一组件下动态修改数据时的全部重渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue3如何采用xlsx库实现本地上传excel文件功能,并且前端解析为Json数据,感兴趣的小伙伴可以了解一下2025-02-02
这篇文章主要为大家介绍了详解vue3中如何使用youtube-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue实现渐变色进度条的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了vue-electron中修改表格内容并修改样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论