那v-for形式的动态绑定ref

v-for 形式的动态绑定 `ref`，可以通过在 `v-for` 循环中使用 `ref` 属性来实现，例如：

<template>
  <div v-for="(item, index) in list" v-bind:key="index" v-bind:ref="'item-' + index">{{ item }}</div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Banana', 'Orange']
    }
  },
  mounted() {
    console.log(this.$refs) // 输出所有 div 元素的引用
    console.log(this.$refs['item-0']) // 输出第一个 div 元素的引用
    console.log(this.$refs['item-1']) // 输出第二个 div 元素的引用
    console.log(this.$refs['item-2']) // 输出第三个 div 元素的引用
  }
}
</script>

在上述例子中，我们在 `v-for` 循环中使用 `v-bind:ref="'item-' + index"` 来动态绑定 `ref`，其中 `index` 是循环中的索引，`'item-' + index` 是 `ref` 的名称。这样就可以在循环完成后，通过 `this.$refs` 来获取所有 `div` 元素的引用。

需要注意的是，当使用 `v-for` 循环时，动态绑定 `ref` 的名称需要保证是唯一的，否则可能会出现重复的 `ref` 名称，导致获取引用出现问题。