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

Question

如何v-for在特定索引处开始循环。

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

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

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>