vue怎么写在HTML写双重循环,vue-for循环嵌套操作示例

本文实例讲述了vue-for循环嵌套操作。分享给大家供大家参考，具体如下：

Title

*{

margin: 0;

padding: 0;

list-style: none;

}

父循环第几次	子循环第几次	json的第几条数据	数值
{{index}}	{{index2}}	{{i.index}}	{{i.childName}}

const app=new Vue({

el:"#app",

data:{

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/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

希望本文所述对大家vue.js程序设计有所帮助。