vue v-for 切换输出的问题

末子
  • 63
<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 循环吗 ?

回复
阅读 2.6k
5 个回答

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

<div class="row" v-for="i in Math.ceil(plateList.length/4)">

      <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])">
         <!--每一个子项 plateList[i*4 + j]代表当前数据-->
      </div>

</div>

一般都是用 computed 弄一个二维数组。

<div class="row" v-for="fourPlates of every4Plates">
  <div class="col-xs-3" v-for="rs of fourPlates"></div>
</div>

vue不能直接满足你的需求。
但可以转个弯解决一下。
1.bootstrap中row下的col好像是可以自动换行的,所以,你是否真的需要那么多row?直接把所有的col放到同一个row下不行吗?

2.如果真的要你说的那个,可以修改一个数据结构,把你的plateList先循环一篇,变成这种结构
var plateList=[
[rs,rs,rs,rs],
[rs,rs,rs,rs],
.....
]
然后使用v-for嵌套。

模板中需要打断输出

这个描述有点不明觉厉......

每行 4 条记录,第 5 条另起一行

这个规律是固定的吗,比如每行4个?规律的话我觉得用样式就可以搞定了。
如果不是规律的,那么v-for循环,给个循环下标,通过下标来实现你的需求。

宣传栏