如何在特定索引处启动 v-for 循环

Question

如何在特定索引处启动 v-for 循环。

示例：给定的数组 array = [a,b,c,d,e,f];

我想使用 v-for 循环，它将从第三个元素开始循环。谢谢 ：）

原文由 Jitu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需使用标准切片方法：

 new Vue({
  el: '#app',
  data: {
    items: [
      'aaa',
      'bbb',
      'ccc',
      'ddd',
      'eee',
      'fff'
    ]
  }
})

 <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items.slice(2)">{{ item }}</li>
  </ul>
</div>

PS：或者 v-for 和 v-if：

 new Vue({
  el: '#app',
  data: {
    items: [
      'aaa',
      'bbb',
      'ccc',
      'ddd',
      'eee',
      'fff'
    ]
  }
})

 <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="(item, index) in items" v-if="index >= 2">{{ item }}</li>
  </ul>
</div>

或者使用自定义函数：

 new Vue({
  el: '#app',
  data: {
    items: [
      'aaa',
      'bbb',
      'ccc',
      'ddd',
      'eee',
      'fff'
    ]
  },
  methods: {
    startFrom (arr, idx) {
      return arr.slice(idx)
    }
  }
})

 <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in startFrom(items, 2)">{{ item }}</li>
  </ul>
</div>

原文由 user6748331 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果使用 filter 方法，则必须在计算值和显示中循环遍历数组。鉴于您知道数组中的起始元素，您最好在 <div v-for="(item , index) in array.slice(1,array.length)"> 中使用 切片，或者如果您仍想使用计算值```

 computed:{
  getArray(){
    return this.array.slice(1,this.array.length)
  }
}

我建议使用计算值。

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议