javascript - vue的循环v-for如何一次循环2条项目？

Question

我现在是这样实现的 但总感觉哪儿不对

<ul v-for="(item,index) in items" v-if="index%2==0">
  <li>{{items[index].name}}</li>
  <li>{{items[index+1].name}}</li>
</ul>

Answer 1

雷雷

Answer 2

雷雷

Answer 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>

大概就这么个意思吧，不过有些细节需要你自己稍微再考虑一下，比如说items.length是奇数的时候怎么办

Answer 4

index是从0开始的

Answer 5

我怎么感觉你这样写和全部循环没有区别啊。。。

Answer 6

你的需求具体是什么,看你的代码并不能看出什么

下面是不是你要的东西?
这一个计算属性，把数组拆分成两个数组放入一个数组

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>

Answer 7

能直接用模版语法的，就不要做额外计算：

<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>

Answer 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>