在做vue项目的时候难免会用到循环,可是但我们后台数据返回多条记录而且是多层嵌套关系的时候,我们需要获取当前第几次循环此时就会出现问题。
下面给大家介绍两种方式,第一种是基于数学公式:第一次循环*(第二次循环总长度)+1+第二次循环 可以获取当前第几次循环
第二种方法:是在方法中进行计算返回当前下标。废话不多说先看一下效果吧
具体代码如下:
测试数据json字符串:
parentList: [{ childList: [{ index: 1, childName: "第一个节点" }, { index: 2, childName: "第一个节点" }, { index: 3, childName: "第一个节点" }, { index: 4, childName: "第一个节点" }, { index: 5, childName: "第一个节点" }] }, { childList: [{ index: 6, childName: "第二个节点" }, { index: 7, childName: "第二个节点" }, { index: 8, childName: "第二个节点" }, { index: 9, childName: "第二个节点" }, { index: 10, childName: "第一个节点" }] }, { childList: [{ index: 11, childName: "第二个节点" }, { index: 12, childName: "第二个节点" }, { index: 13, childName: "第一个节点" }, { index: 14, childName: "第一个节点" }, { index: 15, childName: "第一个节点" }] }]
页面HTML 具体代码:
<template> <div class="hello"> <h1>获取多层循环的总行数</h1> <table border="1" width="50%" align="center"> <tr> <td>父循环第几次</td> <td>子循环第几次</td> <td>第一种办法</td> <td>第二种办法</td> <td>json字符串中的行数</td> <td>数值</td> </tr> <tbody v-for="parent,index in parentList" :key="index"> <tr v-for="child,cindex in parent.childList" :key="child.index"> <td>{{index}}</td> <td>{{cindex}}</td> <td olor="red"> <font size="3" color="red">{{index*(parent.childList.length)+1+cindex}}</font></td> <td><font size="3" color="red">{{getIndex()}}</font></td> <td>{{child.index}}</td> <td>{{child.childName}}</td> </tr> </tbody> </table> </div> </template>
第二种获取下标的方法:
methods:{ getIndex(){ if (!this.index){ this.index=1 }else{ this.index++ } return this.index } }
这样我们就轻松的获取到当前循环第几行啦。
以上这篇基于vue v-for 多层循环嵌套获取行数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]