基于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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
详解PHP归并排序的实现
2016/10/18 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
js仿360开机效果
2019/12/26 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中的多重装饰器
2015/04/11 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
如何用python 操作zookeeper
2020/12/28 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
助残日活动总结
2014/08/27 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
新郎新娘致辞
2015/07/31 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers