如何实现Vue中v-for循环从指定起始值（如5）到结束值（如10）？

嘿，别用v-if过滤啦，给你几个更高效直接的实现方式，让循环从5开始到10结束：

这种方式最清晰也最容易维护，把需要的数值范围封装成计算属性，直接循环这个数组就行：

<template>
  <div v-for="n in numberRange" :key="n">
    {{ n }}
  </div>
</template>

<script>
export default {
  computed: {
    numberRange() {
      // 计算范围长度：10 - 5 + 1 = 6个数值
      return Array.from({ length: 6 }, (_, index) => index + 5);
    }
  }
}
</script>

原理很简单：Array.from根据指定长度生成数组，回调里的索引从0开始，加上5就刚好得到5到10的所有数值。

如果不想写计算属性，也可以直接把数组生成逻辑写在模板里，虽然可读性稍弱，但代码更紧凑：

<div v-for="n in Array.from({ length: 6 }, (_, i) => i + 5)" :key="n">
  {{ n }}
</div>

还有个更简洁的小技巧——循环一个基础范围，再通过数值偏移得到目标值：

<div v-for="i in 6" :key="i">
  {{ i + 4 }}
</div>

这里循环1到6（共6个数），每个数加4就刚好是5到10。这种方式适合简单的固定范围场景，一眼就能看懂。

这些方法都比原来用v-if过滤要高效，因为它们直接生成你需要的数值范围，不会先循环1到10再过滤掉前4个元素，尤其当范围很大的时候，性能差异会更明显。

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