基于vue v-for 多层循环嵌套获取行数的方法


Posted in Javascript onSeptember 26, 2018

在做vue项目的时候难免会用到循环,可是但我们后台数据返回多条记录而且是多层嵌套关系的时候,我们需要获取当前第几次循环此时就会出现问题。

下面给大家介绍两种方式,第一种是基于数学公式:第一次循环*(第二次循环总长度)+1+第二次循环 可以获取当前第几次循环

第二种方法:是在方法中进行计算返回当前下标。废话不多说先看一下效果吧

基于vue v-for 多层循环嵌套获取行数的方法

具体代码如下:

测试数据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 多层循环嵌套获取行数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
js实现随机数小游戏
Jun 28 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
js实现碰撞检测
Jan 29 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 #Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 #Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php实现telnet功能示例
2014/04/08 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php session的锁和并发
2016/01/22 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python绘制地震散点图
2019/06/18 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
人事任命书怎么写
2014/06/05 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书