具有不同起点和结束点的迭代数组
具有不同起点和结束点的迭代数组
提问于 2017-11-10 14:15:11
如何迭代具有不同起始点和端点的json数组。
例如，列出20个项目。
我想在0-4，5-9，10-14，15-19.
我尝试过使用不同选项的v-for语法，但无法工作。
<tr v-for="(user, index) in json.users">我希望用户在第一个循环中使用users4，然后在第二个循环中使用users5到users9等.
我不想一次迭代整个循环。我要把它分成两部分。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-11-10 14:22:46
可以在模板中对数组进行切片：
<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>
Stack Overflow用户
发布于 2017-11-10 14:32:57
使用v-表示范围和切片.
Vuejs支持v-for有一个范围。
https://v2.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的倍数时，您需要修复它。
Stack Overflow用户
发布于 2018-04-06 14:58:00
下面是一些代码，可以帮助您按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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47224745
复制相关文章
相似问题
腾讯云开发者
