Vue.js v-for 数组索引 - Html

在Vue.js中，我们可以使用v-for指令来循环遍历数组并渲染元素列表。而对于需要使用数组索引的情况，Vue.js提供了一种方式来获取当前循环的索引值。

语法

下面是v-for指令的语法：

<div v-for="(item, index) in array" :key="index">
  {{ index }} - {{ item }}
</div>

在上面的示例中，item表示当前循环的数组元素，index表示当前循环的索引值。

示例

假设我们有一个包含以下元素的数组：

data() {
  return {
    items: ['Apple', 'Banana', 'Orange']
  }
}

我们可以使用v-for指令来循环遍历数组，并在模板中显示元素及其索引：

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

以上示例将会在页面上渲染出如下内容：

<div>
  <div>0 - Apple</div>
  <div>1 - Banana</div>
  <div>2 - Orange</div>
</div>

注意事项

• 在使用v-for指令时，需要为每个元素指定一个唯一的key属性。这有助于Vue.js优化渲染，提高性能。
• 数组索引从0开始。
• 你可以根据需要将索引值与数组元素进行任意组合和操作。

希望以上内容能帮助到你在使用Vue.js的v-for指令时获取数组索引。