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>