为了账号安全,请及时绑定邮箱和手机立即绑定

vue v-for 切换输出的问题

vue v-for 切换输出的问题

蓝山帝景 2019-03-14 22:15:34
<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 循环吗 ?
查看完整描述

5 回答

?
倚天杖

TA贡献1828条经验 获得超3个赞

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


查看完整回答
反对 回复 2019-03-22
?
回首忆惘然

TA贡献1847条经验 获得超11个赞

<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>


查看完整回答
反对 回复 2019-03-22
?
杨魅力

TA贡献1811条经验 获得超6个赞

模板中需要打断输出

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

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

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


查看完整回答
反对 回复 2019-03-22
  • 5 回答
  • 0 关注
  • 724 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信