vue-for迴圈的巢狀
阿新 • • 發佈:2019-02-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } </style> </head> <body> <table id="app" border="1" cellspacing="0" cellpadding="0"> <tr> <td>父迴圈第幾次</td> <td>子迴圈第幾次</td> <td>json的第幾條資料</td> <td>數值</td></tr> <tbody v-for="x,index in parentList"> <tr v-for="i,index2 in x.childList"> <td>{{index}}</td> <td>{{index2}}</td> <td>{{i.index}}</td> <td>{{i.childName}}</td> </tr> </tbody> </table> </body> <script src="vue.js"></script> <script> 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: "第三個節點" }] }] } }) </script> </html>