Question

如何使用不同的start和endpoint迭代json数组。

e.g。说一个20项的清单..

我想迭代列表 0-4,5-9,10-14,15-19 ......

我已尝试使用不同选项的 v-for 语法，但无法使其正常工作。

  <tr v-for="(user, index) in json.users">

我想在第一个循环中将用户[0]发送给用户[4]，然后用户[5]到用户[9]在第二次循环等...

我不想立刻迭代整个循环。我需要在分割部分中进行表达。

Answer 1

您可以在模板中对数组进行切片：

<div v-for="item in items.slice(0, 4)>
  {{ item }}
</div>

以下是一个例子：

new Vue({
  el: '#app',
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
    }
  }
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul v-for="i in 5">
    <li v-for="item in items.slice((i-1)*5, (i-1)*5+5)">
      {{ item }}
    </li>
  </ul>
</div>

或者，您可以创建一个计算属性，以便以更容易显示的方式构建数据：

new Vue({
  el: '#app',
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
    }
  },
  computed: {
    sections() {
      let sections = [], size = 5;
      let items = [...this.items];

      while (items.length > 0)
        sections.push(items.splice(0, size));
        
      return sections;
    }
  }     
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul v-for="items in sections">
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

Answer 2

使用v-for范围和切片。

Vuejs支持范围内的v-for。

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

<div v-for="n in (items.length / 5)">
  <div v-for="item in items.slice(n*5, n*5 + 5)>
    {{ item }}
  </div>
</div>

请注意，以下代码未完成，您需要在列表不是5的倍数时修复它。

Answer 3

以下是一些可以帮助您按8分组项目的代码：

<div v-for="i in (dataAll.length/8)">
    <div v-for="(item, key, index) in dataAll.slice((i*8)-8, (i*8))">
    {{ item }}
    </div>
</div>

迭代具有不同起点和终点的数组

3 个答案: