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

【问题标题】：How to start a v-for loop at a specific index如何在特定索引处启动 v-for 循环
【发布时间】：2017-09-10 12:30:10
【问题描述】：

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

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

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

【问题讨论】：

加两个 - index + 2?
slice

标签： javascript vue.js vuejs2

【解决方案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>

【讨论】：

[vue/no-use-v-if-with-v-for] 'v-for' 指令中的 'undefined' 变量应该替换为返回过滤数组的计算属性。您不应将“v-for”与“v-if”混用。

【解决方案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>

【讨论】：

应该是<div v-for="(item , index) in getArray">
请避免code-only answers

【解决方案3】：

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

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

我建议使用计算值。

【讨论】：