基于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中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
JS画5角星方法介绍
Sep 17 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
js实现常用排序算法
Aug 09 Javascript
vuex的简单使用教程
Feb 02 Javascript
vue观察模式浅析
Sep 25 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
原生JS实现音乐播放器
Jan 26 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 MYSQL中插入当前时间
2008/04/06 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
php中数组最简单的使用方法
2020/12/27 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Javascript的比较汇总
2016/07/25 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
node实现爬虫的几种简易方式
2019/08/22 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
详解python Todo清单实战
2018/11/01 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python实现代码统计程序
2019/09/19 Python
两只小狮子教学反思
2014/02/05 职场文书
护林防火标语
2014/06/27 职场文书
新学期开学标语
2014/06/30 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
搞笑结婚保证书
2015/05/08 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python