基于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 图片裁剪技巧解读
Nov 15 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解JavaScript树结构
Jan 09 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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者的疑难问答(2)
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP6新特性分析
2016/03/03 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python 查找字符串是否存在实例详解
2017/01/20 Python
python selenium firefox使用详解
2019/02/26 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Python实现井字棋小游戏
2020/03/09 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
班级标语大全
2014/06/21 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android