Vue.js中如何获取v-for循环的索引？

嘿，这个问题其实很容易解决！Vue的v-for指令支持在遍历数组时同时拿到当前项和对应的索引值，只需要在循环语法里添加第二个参数就行啦。

具体来说，你可以把原来的v-for="item in items"改成v-for="(item, index) in items"——这里的第二个参数index就是当前循环的索引（从0开始计数哦）。然后你就可以把它绑定到:key上，或者在模板里的其他地方使用。

给你一个完整的示例代码：

<template>
  <div v-for="(item, index) in items" :key="index">
    <!-- 这里可以直接使用index，比如显示从1开始的序号 -->
    第{{ index + 1 }}项：{{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'a' },
        { name: 'b' },
        // 更多列表项...
      ]
    }
  }
}
</script>

小提醒 #

• 索引index默认从0开始，如果需要展示从1开始的序号，直接用index + 1即可。
• 如果你的列表会有动态增删、排序操作，不建议用index作为:key（因为索引会随着列表变化而改变，可能导致Vue的DOM复用逻辑出现问题），这种情况下最好用每个item的唯一标识（比如item.id）作为key。

内容的提问来源于stack exchange，提问作者sof-03