我現(xiàn)在是這樣實(shí)現(xiàn)的 但總感覺(jué)哪裡不對(duì)
<ul v-for="(item,index) in items" v-if="index%2==0">
<li>{{items[index].name}}</li>
<li>{{items[index+1].name}}</li>
</ul>
<ul v-for="i in (items.length / 2)">
<li>{{items[(i - 1) * 2].name}}</li>
<li>{{items[(i - 1) * 2 + 1].name}}</li>
</ul>
大概就這麼意思吧,不過(guò)有些細(xì)節(jié)需要你自己稍微再考慮一下,比如說(shuō)items.length
是奇數(shù)的時(shí)候怎麼辦
你的需求具體是什麼,看你的程式碼並不能看出什麼
下面是不是你要的東西?
這一個(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>
能直接用模版語(yǔ)法的,就不要做額外計(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>
額?這是為了分組顯示嗎?
<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>