在做vue项目的时候难免会用到循环,可是但我们后台数据返回多条记录而且是多层嵌套关系的时候,我们需要获取当前第几次循环此时就会出现问题。
下面给大家介绍两种方式,第一种是基于数学公式:可以获取当前第几次循环
第二种方法:是。废话不多说先看一下效果吧
<强>具体代码如下:
测试数据json字符串:
parentList: [{
childList: [{
指数:1
childName:“第一个节点”
},{
指数:2
childName:“第一个节点”
},{
指数:3
childName:“第一个节点”
},{
指数:4
childName:“第一个节点”
},{
指数:5
childName:“第一个节点”
})
},
{
childList: [{
指数:6
childName:“第二个节点”
},{
指数:7,
childName:“第二个节点”
},{
指数:8
childName:“第二个节点”
},{
指数:9,
childName:“第二个节点”
},{
指数:10
childName:“第一个节点”
})
},
{
childList: [{
指数:11日
childName:“第二个节点”
},{
指数:12,
childName:“第二个节点”
},{
指数:13日
childName:“第一个节点”
},{
指数:14日
childName:“第一个节点”
},{
指数:15日
childName:“第一个节点”
})
})
之前
<强>页面HTML具体代码:
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>获取多层循环的总行数& lt;/h2>
& lt;表边界=" 1 "宽=?0%”对齐=爸行摹北?
& lt; tr>
& lt; td>父循环第几次& lt;/td>
& lt; td>子循环第几次& lt;/td>
& lt; td>第一种办法& lt;/td>
& lt; td>第二种办法& lt;/td>
& lt; td> json字符串中的行数& lt;/td>
& lt; td>数值& lt;/td>
& lt;/tr>
& lt; tbody v=皃arentList家长,指数”:关键=爸甘北?
& lt; tr v="孩子,cindex父母。childList”:关键=" child.index "比;
& lt; td>{{指数}}& lt;/td>
& lt; td> {{cindex}} & lt;/td>
& lt; td olor=昂焐痹? lt;字体大小颜色=?”=昂焐痹趝{指数* (parent.childList.length) + 1 + cindex}} & lt;/font> & lt;/td>
& lt; td> & lt;字体大?=昂臁薄?”颜色在{{getIndex ()}} & lt;/font> & lt;/td>
& lt; td> {{child.index}} & lt;/td>
& lt; td> {{child.childName}} & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt;/div>
& lt;/template>
之前
<强>第二种获取下标的方法:
方法:{
getIndex () {
如果(! this.index) {
this.index=1
其他}{
this.index + +
}
返回this.index
}
}
之前
这样我们就轻松的获取到当前循环第几行啦。
以上这篇基于vue v代表多层循环嵌套获取行数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
