基于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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
this和执行上下文实现代码
Jul 01 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
如何用js控制css中的float的代码
2007/08/16 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python实现图片批量剪切示例
2014/03/25 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python 图片去噪的方法示例
2019/07/09 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
销售冠军获奖感言
2014/02/03 职场文书
市场营销求职信范文
2014/02/21 职场文书
校园环保建议书
2014/05/14 职场文书
如何写求职信
2014/05/24 职场文书
个人廉政承诺书
2015/04/28 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL