在做vue項目的時候難免會用到循環(huán),可是但我們后臺數(shù)據(jù)返回多條記錄而且是多層嵌套關系的時候,我們需要獲取當前第幾次循環(huán)此時就會出現(xiàn)問題。
專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)墨竹工卡免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了超過千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
下面給大家介紹兩種方式,第一種是基于數(shù)學公式:第一次循環(huán)*(第二次循環(huán)總長度)+1+第二次循環(huán) 可以獲取當前第幾次循環(huán)
第二種方法:是在方法中進行計算返回當前下標。廢話不多說先看一下效果吧
具體代碼如下:
測試數(shù)據(jù)json字符串:
parentList: [{ childList: [{ index: 1, childName: "第一個節(jié)點" }, { index: 2, childName: "第一個節(jié)點" }, { index: 3, childName: "第一個節(jié)點" }, { index: 4, childName: "第一個節(jié)點" }, { index: 5, childName: "第一個節(jié)點" }] }, { childList: [{ index: 6, childName: "第二個節(jié)點" }, { index: 7, childName: "第二個節(jié)點" }, { index: 8, childName: "第二個節(jié)點" }, { index: 9, childName: "第二個節(jié)點" }, { index: 10, childName: "第一個節(jié)點" }] }, { childList: [{ index: 11, childName: "第二個節(jié)點" }, { index: 12, childName: "第二個節(jié)點" }, { index: 13, childName: "第一個節(jié)點" }, { index: 14, childName: "第一個節(jié)點" }, { index: 15, childName: "第一個節(jié)點" }] }]
頁面HTML 具體代碼:
<template> <div class="hello"> <h2>獲取多層循環(huán)的總行數(shù)</h2> <table border="1" width="50%" align="center"> <tr> <td>父循環(huán)第幾次</td> <td>子循環(huán)第幾次</td> <td>第一種辦法</td> <td>第二種辦法</td> <td>json字符串中的行數(shù)</td> <td>數(shù)值</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 } }
這樣我們就輕松的獲取到當前循環(huán)第幾行啦。
以上這篇基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
當前文章:基于vuev-for多層循環(huán)嵌套獲取行數(shù)的方法
鏈接分享:http://www.chinadenli.net/article16/jdjedg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、品牌網(wǎng)站建設、響應式網(wǎng)站、自適應網(wǎng)站、、網(wǎng)站設計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)