javascript - vue的循環(huán)v-for如何一次循環(huán)2條項(xiàng)目？
問題描述
我現(xiàn)在是這樣實(shí)現(xiàn)的 但總感覺哪兒不對
<ul v-for='(item,index) in items' v-if='index%2==0'> <li>{{items[index].name}}</li> <li>{{items[index+1].name}}</li></ul>
問題解答
回答1：<!DOCTYPE html><html><head> <meta charset='UTF-8'></head><body> <p id='app'><input type='number' v-model.number='count' /><ol> <li v-for='g in groups'><ol> <li v-for='item in g'>{{ item }}</li></ol> </li></ol> </p> <script src='http://cdn.bootcss.com/vue/2.1.6/vue.min.js'></script> <script>function GroupByCount(items, count) { var len = items.length; var arr = []; var child = []; for (var i = 0; i < len; i++) {child.push(items[i]);if (child.length === count) { arr.push(child); child = [];} } if (child.length > 0) {arr.push(child); } return arr;}new Vue({ el: ’#app’, data() {return { count: 2, items: []} }, created() {this.items = Array.apply(null, Array(20)).map(function (x, i) { return i; }) }, computed: {groups() { return GroupByCount(this.items, this.count)} }}) </script></body></html>回答2：
<ul v-for='(item,index) in items'><slot v-if='index<items.length&&index%2==0'> <li >{{items[index].name}}</li> <li v-if='index<items.length-1'>{{items[index+1].name}}</li> </slot></ul>回答3：
<ul v-for='i in (items.length / 2)'> <li>{{items[(i - 1) * 2].name}}</li> <li>{{items[(i - 1) * 2 + 1].name}}</li></ul>
大概就這么個(gè)意思吧，不過有些細(xì)節(jié)需要你自己稍微再考慮一下，比如說items.length是奇數(shù)的時(shí)候怎么辦
回答4：index是從0開始的
回答5：我怎么感覺你這樣寫和全部循環(huán)沒有區(qū)別啊。。。
回答6：你的需求具體是什么,看你的代碼并不能看出什么
下面是不是你要的東西?這一個(gè)計(jì)算屬性，把數(shù)組拆分成兩個(gè)數(shù)組放入一個(gè)數(shù)組
itemsComputed (){ let arr = []; arr.push(this.items.filter((o,i)=>i%2===0)); arr.push(this.items.filter((o,i)=>i%2===1)); return arr;}
<ul><li v-for='item in itemsComputed[0]'> ...</li> </ul> <ul><li v-for='item in itemsComputed[1]'> ...</li> </ul>回答7：
能直接用模版語法的，就不要做額外計(jì)算：
<template v-for='(item,index) in items'> <ul v-if='index % 2 == 0'><li>{{items[index].name}}</li><li v-if='index < items.length'>{{items[index+1].name}}</li> </ul></template>回答8：
額？這是為了分組顯示嗎？
<template> <ul v-for='(item,idx) in b'> <li v-for='i in item'>{{i}}</li> </ul></template><script>export default { data () { return { a: [1, 2, 3, 4, 5] } }, computed: { b () { const b = [] const a = this.a for (let i = 0, l = a.length; i < l;) {b.push([a[i++], a[i++]]) } return b } }}</script>
相關(guān)文章：
1. nignx - docker內(nèi)nginx 80端口被占用2. docker容器呢SSH為什么連不通呢？3. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件4. docker - 各位電腦上有多少個(gè)容器啊？容器一多，自己都搞混了，咋辦呢？5. 關(guān)于docker下的nginx壓力測試6. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””7. mac里的docker如何命令行開啟呢？8. docker gitlab 如何git clone？9. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問題 麻煩幫我看一下10. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。
網(wǎng)公網(wǎng)安備