如何在Vue中使用v-for实现从0开始每隔3个索引取值的循环

有两种常用实现方式，优先推荐第一种：

• 方式一：计算属性预处理（推荐）
  把过滤逻辑放在计算属性中，和你写的原生JavaScript循环逻辑完全对齐，模板无多余逻辑，性能最优。
  计算属性代码：

computed: {
  targetData() {
    const res = []
    // sourceList 为你的原始数据数组，存在当前组件的data中
    for (let i = 0; i < this.sourceList.length; i += 3) {
      res.push(this.sourceList[i])
    }
    return res
  }
}

模板中直接遍历计算属性即可：

<template>
  <!-- 遍历过滤后的目标数据 -->
  <div v-for="(item, idx) in targetData" :key="idx">
    <!-- 此处写你的item渲染逻辑 -->
    {{ item }}
  </div>
</template>

• 方式二：模板内直接加索引判断
  如果不想提前处理数据，可以在遍历原数组时通过v-if过滤符合要求的索引，索引对3取模等于0就是你要的目标索引：

<template>
  <div
    v-for="(item, idx) in sourceList"
    v-if="idx % 3 === 0"
    :key="idx"
  >
    {{ item }}
  </div>
</template>

注意：该方式不适合数据量过大的场景，v-for会先遍历所有元素再执行过滤判断，性能比计算属性预处理差。

内容的提问来源于stack exchange，提问作者Lakius