這篇文章主要介紹了vue-for循環嵌套操作,結合實例形式分析了vue.js使用for循環嵌套讀取數據相關操作技巧,需要的朋友可以參考下
本文實例講述了vue-for循環嵌套操作。分享給大家供大家參考,具體如下:
<!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="https://cdn.bootcss.com/vue/2.4.4/vue.min.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>
這裏使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼,可得如下運行結果:
希望本文所述對大家vue.js程序設計有所幫助。