C'est ainsi que je l'ai mis en œuvre maintenant, mais j'ai toujours l'impression que quelque chose ne va pas
<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>
C'est probablement ce que cela signifie, mais il y a certains détails auxquels vous devez réfléchir un peu plus, comme par exemple que faire lorsque items.lengthest un nombre impair
items.length
index是从0开始的
Pourquoi ai-je l’impression qu’il n’y a aucune différence entre ce que vous écrivez ainsi et toute la boucle ? . .
Quels sont vos besoins spécifiques ? Vous ne pouvez rien dire en regardant votre code
Ce qui suit est-il ce que vous voulez ?Il s'agit d'un attribut calculé, divisez le tableau en deux tableaux et placez-les dans un seul tableau
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>
Si vous pouvez utiliser directement la syntaxe du modèle, vous n'avez pas besoin d'effectuer de calculs supplémentaires :
<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>
Euh ? Est-ce pour un affichage groupé ?
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
C'est probablement ce que cela signifie, mais il y a certains détails auxquels vous devez réfléchir un peu plus, comme par exemple que faire lorsque
items.lengthest un nombre impairindex是从0开始的Pourquoi ai-je l’impression qu’il n’y a aucune différence entre ce que vous écrivez ainsi et toute la boucle ? . .
Quels sont vos besoins spécifiques ? Vous ne pouvez rien dire en regardant votre code
Ce qui suit est-il ce que vous voulez ?
Il s'agit d'un attribut calculé, divisez le tableau en deux tableaux et placez-les dans un seul tableau
Si vous pouvez utiliser directement la syntaxe du modèle, vous n'avez pas besoin d'effectuer de calculs supplémentaires :
Euh ? Est-ce pour un affichage groupé ?