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

问题描述

问 题

用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布局,如何写,栅格布局才能生效呢

解决方案

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

这篇关于vue.js - vue循环时,根据条件生成html结束标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！