Vue2中 使用 v-for 时动态绑定 ref

在Vue2中，我们可以使用动态绑定的方式来为v-for循环生成的元素动态绑定ref。

首先，在v-for循环中使用v-bind指令将ref绑定到一个动态的属性上。例如，我们可以使用:ref="'item-' + index"来动态绑定ref属性，其中index是v-for循环中的索引。

接下来，在需要使用ref的地方，可以通过this.$refs来访问动态绑定的ref。例如，可以使用this.$refs['item-' + index]来访问具有特定索引的元素的ref。

下面是一个示例代码：

<template>
  <div>
    <div v-for="(item, index) in items" :ref="'item-' + index" :key="index">{{ item }}</div>
    <button @click="logRefs">Log Refs</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    logRefs() {
      for (let index = 0; index < this.items.length; index++) {
        const ref = this.$refs['item-' + index];
        console.log(ref);
      }
    }
  }
}
</script>

在上面的示例中，我们使用v-for循环生成了一个包含三个元素的列表，并将每个元素的ref绑定到一个动态的属性上。当点击按钮时，会通过循环遍历访问每个元素的ref，并打印到控制台上。

请注意，动态绑定ref的方式和动态绑定其他属性的方式是类似的，都是使用冒号（:）来进行动态绑定