vue 在v-for列表动态添加ref，并获取对应元素
vue中的ref对于操作dom非常方便，可以直接通过给div加ref，在方法里通过this.$refs.ref的name获取
<template><div class="nav" ref="nav"> // 给div加ref</div></template><script>export default {methods: {handleData() {this.$refs.nav // 获取dom}},}</script>
对于v-for渲染的动态元素，可以通过设置相同的ref，并通过索引获取
<template><div class="nav" ref="nav"> // 给div加ref<li v-for="(items,index) of item.datas" ref="navlist" @click="newsNavBtn(index)" :class="{active:actives==items.id}">{{items.name}}</li></div></template><script>export default {methods: {newsNavBtn(index) {console.log(this.$refs.navlist)}},}</script>
控制台输入结果如下：
可以看到，此时的this.$refs.navlist是一个数组，而我们要获取的是每一个dom元素，因此，只用在数组加上索引即可
即
newsNavBtn(index) {console.log(this.$refs.navlist[index])}
输出结果如下：
vue文档介绍ref的时候有一句话：
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
