84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
This is how I implement it now, but I always feel like something is wrong
<ul v-for="(item,index) in items" v-if="index%2==0"> <li>{{items[index].name}}</li> <li>{{items[index+1].name}}</li> </ul>
<!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>
<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>
<ul v-for="i in (items.length / 2)"> <li>{{items[(i - 1) * 2].name}}</li> <li>{{items[(i - 1) * 2 + 1].name}}</li> </ul>
That’s probably what it means, but there are some details that you need to think about a little more, such as what to do when items.lengthis an odd number
items.length
index是从0开始的
Why do I feel that there is no difference between writing it this way and looping it all? . .
What are your specific needs? You can’t tell anything by looking at your code
Is the following what you want?This is a calculated attribute, split the array into two arrays and put them into one array
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>
If you can use template syntax directly, you don’t need to do extra calculations:
<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>
Uh? Is this for group display?
<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>
That’s probably what it means, but there are some details that you need to think about a little more, such as what to do when
items.length
is an odd numberindex是从0开始的
Why do I feel that there is no difference between writing it this way and looping it all? . .
What are your specific needs? You can’t tell anything by looking at your code
Is the following what you want?
This is a calculated attribute, split the array into two arrays and put them into one array
If you can use template syntax directly, you don’t need to do extra calculations:
Uh? Is this for group display?