在for循环中通过ref获取到dom

在vue中，我们通常会使用$refs.<refName>的方式去获取其绑定ref值为<refName>的dom元素。

ref绑定dom元素

 <div ref="getDom">获取dom</div>

 打印绑定的dom

const getDom=ref(null)
onMounted(()=>{
  console.log(getDom.value)
})

打印结果：

在这里我们可以看到，我们已经成功地获取到了这个dom元素

在for循环中我们先用刚才的方法去打印for循环的dom元素

ref绑定dom元素

 <div ref="getDomArr" v-for="item in [1,2,3]">{{ item }}</div>

打印绑定的dom

const getDomArr=ref(null)
onMounted(()=>{
  console.log(getDomArr.value)
})

打印结果在这里可以看到，我们打印出来的是一个数组 ，若我们需要操作dom，可以先用数组的方法拿到dom，再去操作dom (此处需要在页面加载完成后，dom数组才会完整获取)

你想要通过ref去获取for循环里面的元素，还可以采用下方的写法

   <div v-for="i in 800">
    <span>第{{ i }}项</span>
    <button :ref="pushBtnList">点击</button>
   </div>

 //声明一个空数组
 const btnList = reactive([])
 //将for循环里面的dom依次加入到btnList里面
 const pushBtnList = (el) =>{
      btnList.push(el)
 }

可以在btnList里面去拿到并修改我们想要的按钮dom (此处需要在页面加载完成后，dom数组才会完整获取，直接打印，该数组为 [ ])