您好,登录后才能下订单哦!
这篇文章主要介绍“Vue2和Vue3在v-for遍历时ref获取dom节点的区别是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue2和Vue3在v-for遍历时ref获取dom节点的区别是什么”文章能帮助大家解决问题。
在 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 中,对 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 没有任何区别。
关于“Vue2和Vue3在v-for遍历时ref获取dom节点的区别是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。