vue 中ref命名如何与v-for index 结合

在Vue中，可以在使用`v-for`指令循环渲染DOM元素时，使用`ref`属性引用这些元素，并将`ref`属性的名称与`v-for`指令的索引变量结合使用。

例如，下面的代码演示了如何在使用`v-for`指令循环渲染一组按钮时，使用`ref`属性引用这些按钮，并将`ref`属性的名称与`v-for`指令的索引变量`index`结合使用：

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

<script>
export default {
  data() {
    return {
      items: ['Button 1', 'Button 2', 'Button 3']
    }
  },
  mounted() {
    for (let i = 0; i < this.items.length; i++) {
      const button = this.$refs['button' + i][0];
      button.addEventListener('click', () => {
        console.log('Button ' + (i + 1) + ' clicked!');
      });
    }
  }
}
</script>

在上面的示例中，我们在`v-for`指令中使用`:ref="'button' + index"`将每个按钮元素的`ref`属性设置为`'button' + index`，其中`index`是`v-for`指令的索引变量。在组件的`mounted`生命周期方法中，我们可以通过使用`this.$refs['button' + i][0]`引用每个按钮元素，并为其添加一个点击事件监听器。

需要注意的是，当使用`v-for`指令循环渲染DOM元素时，`ref`属性会返回一个数组，因此在使用`this.$refs`引用元素时，需要使用`[0]`索引来获取真正的DOM元素。