在Vue.js v2.x中使用v-for指令时，如何指定范围的起始值？

问题描述

我正在打印出用户可以单击的Vue.js寻呼机组件的页码。我看到文档清楚地表明v-for可用于一定范围：

v-for也可以取整数。在这种情况下，它将重复模板多次。

<div> <span v-for="n in 10">{{ n }} </span> </div>

结果：

1 2 3 4 5 6 7 8 9 10

每https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

我仍然找不到为n指定起始值的方法。看来它从1开始并以1递增，直到10。

反正有5个n开始吗？

似乎几乎我需要创建一个方法或计算属性，该方法或计算属性将返回要迭代的确切值的数组，以代替静态10。

还有其他想法吗？

解决方法

无法在 n 处启动v-for。

但是，从偏移量开始就像将偏移量添加到值中一样简单，然后在达到最大值时停止。

<div>
  <template v-for="n in max">
    <span v-if="n + offset <= max">{{ n + offset }} </span>
  </template>
</div>

如果您需要更多控制权，那么computed属性绝对是您的最佳选择，因为它将为您提供完全的控制权。

<div>
  <span v-for="n in computedArr">{{ n }} </span>
</div>

  computed: {
    computedArr() {
      let arr = [];
      for (var i = this.offset; i <= this.max; i++)
        arr[i] = i;
      return arr;
    }

一种方法是定义自己的辅助函数以生成序列：

Vue.prototype.$range = function *(start,end,step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i
  }
}

new Vue({ el: '#app' })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <div v-for="i of $range(5,10)">
    {{ i }}
  </div>
</div>

javascript v-for vue.js