vue v-for 切换输出的问题

Question

<div class="row">

                <div class="col-xs-3" v-for="rs in plateList" @click="viewPlateList(rs[1],rs[2])">

                    <div class="top-area">

                        <p>{{ rs[1] }}</p>

                        <!--<p>+0.49%</p>-->

                        <p v-bind:class="[ (rs[0] > 0) ? 'add' : 'cut' ]">{{ getFull(rs[0]) }}%</p>

                        <p>{{ rs[3] }}</p>

                        <p class="add">{{ getFull(rs[4]) }}%</p>

                    </div>

                </div>

                

                <!--#我想在这个位置 控制输出 </div><div class="row"> -->

            </div>

大抵意思就是，我只有一个数组（数据）对象，我想通过 v-for 循环输出，但是在模板中需要打断输出，比如每行 4 条记录，第 5 条另起一行 …

必须要将我的数组拆分然后嵌套 v-for 循环吗 ？

Answer 1

拆分成两份，因为你那在两个区域

Answer 2

<div class="row" v-for="i in Math.ceil(plateList.length/4)">&nbsp; &nbsp; &nbsp; <div class="col-xs-3" v-for="j in 4" v-if="(i*4 + j)<plateList.length" @click="viewPlateList(plateList[i*4 + j][1],rs[i*4 + j][2])">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<!--每一个子项 plateList[i*4 + j]代表当前数据-->&nbsp; &nbsp; &nbsp; </div></div>

Answer 3

模板中需要打断输出这个描述有点不明觉厉......每行 4 条记录，第 5 条另起一行这个规律是固定的吗，比如每行4个？规律的话我觉得用样式就可以搞定了。如果不是规律的，那么v-for循环，给个循环下标，通过下标来实现你的需求。