javascript - vue.js 为每第 6 个循环元素插入 block

Question

我已经通过循环呈现了优惠卡列表。每第 3 个 col(bootstrap)元素我添加行 div。现在我需要为每第 6 个元素添加另一个 col 元素(横幅 block )。对于渲染这样的东西:

我该如何实现？

我现在的代码

<div class="row" v-for="i in Math.ceil(offers.length / 3)">
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="offer in offers.slice((i-1)*3, i*3)">
        <h2>{{offer.name}}</h2>
        <h2>{{offer.desc}}</h2>
    </div>
</div>

Answer 1

循环:

    <div class="mycol" v-for="(offer,ind) in offers">
      <template v-if="ind % 5 == 0">
       <h2>banner</banner>
      </template>
      <template v-else>
       <h2>{{offer.name}}</h2>
       <h2>{{offer.desc}}</h2>
      </template>
    </div>

对于每三个col的换行你可以使用css

.mycol:nth-child(3n+1){
 clear:left;
}