如何在特定索引处启动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>

Answer 2

您可以使用计算值Source

    <template>
      <div class="message">

   <div v-for="(item , index) in getArray">


    <span>{{item}}</span>

</div>

</div>
    </template>

    <script>

      export default {
        name: 'message',
         data () {
           return{
               array:['a','b','c','d','e']
             }
        },
        methods:{

        },
        computed:{
            getArray(){
                    const arr = this.array.filter((item , index)=>{
                             return index > 1; //will return the array from the second value
                      })
                  return arr;
            }
        }
      }

    </script>

    <style>


    </style>

Answer 3

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

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

我建议使用计算值。