vue循环时,根据条件生成html结束标签

Question

用vue的v-for指令,循环list,很容易就实现这种效果

<div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
</div>

但是,如果我想实现循环实现这样的,v-for怎么写判断呢

<div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
</div>    
<div class="row">
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
</div>

主要效果是,每生成四个子div,增加一个结束标签和开始标签

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

我试了下,发现我怎么写都不能实现这效果,我该怎样写才能达到这样的效果呢?

主要是因为使用elementUI时,用layout布局的时候,设置了type=flex时,栅格模式不起作用了.
在一个el-row标签里,不管写多少个el-col,它都是一行显示,所以我想,每生成4个el-col时,添加el-row的结束标签.
或者,在使用elementUI时,使用flex布局,如何写,栅格布局才能生效呢

Answer 1

可以将数组先处理成二维数组，然后使用双层v-for处理。

Answer 2

flex布局也是可以换行的：

 <el-row type=flex style="flex-wrap:wrap;">
         <el-col :span="6" v-for="(v,i) in list">{{v}}</el-col> 
 </el-row>    
 

加个：style="flex-wrap:wrap;" 即可。