vue 的 v-for 怎么循环显示两个div

Question

<div class="row">
    <div v-for="(item, index) in items" v-bind:key="index" @click="show(index)">
        <div class="item"/>
        <div class="item_detail"/>
    </div>
</div>

我想得到的结果是

<div class="row">
    <div class="item"/>
    <div class="item_detail"/>
    <div class="item"/>
    <div class="item_detail"/>
    ……
</div>

实际返回的结果却是

<div class="row">
    <div>
        <div class="item"/>
        <div class="item_detail"/>
    </div>
    <div>
        <div class="item"/>
        <div class="item_detail"/>
    </div>
</div>

如果我单独对div循环则是

<div class="row">
    <div class="item"/>
    <div class="item"/>
    ……
    <div class="item_detail"/>        
    <div class="item_detail"/>
    ……
</div>

我应该怎么做才能循环返回并列的两个div呢？

Answer 1

用模板就行了
<div class="row">

<template v-for="(item, index) in items" v-bind:key="index" @click="show(index)">
    <div class="item"/>
    <div class="item_detail"/>
</template>

</div>

Answer 2

考虑用 v-if 判断下 index 的奇偶

Answer 3

把div标签, 修改为用template标签包裹

Answer 4

 <template v-for="(item, index) in items" >
      <div class="item":key="index" />
      <div class="item_detail" />
    </template>

这样写可以的

Answer 5

https://github.com/y-nk/vue-f...

vue3的话自带此功能