vue-for循環(huán)嵌套操作示例
更新時(shí)間:2019年01月28日 11:17:57 作者:s_psycho
這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實(shí)例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue-for循環(huán)嵌套操作。分享給大家供大家參考,具體如下:
<!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>父循環(huán)第幾次</td> <td>子循環(huán)第幾次</td> <td>json的第幾條數(shù)據(jù)</td> <td>數(shù)值</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: "第一個(gè)節(jié)點(diǎn)" }, { index: 2, childName: "第一個(gè)節(jié)點(diǎn)" }, { index: 3, childName: "第一個(gè)節(jié)點(diǎn)" }, { index: 4, childName: "第一個(gè)節(jié)點(diǎn)" }, { index: 5, childName: "第一個(gè)節(jié)點(diǎn)" }] }, { childList: [{ index: 6, childName: "第二個(gè)節(jié)點(diǎn)" }, { index: 7, childName: "第二個(gè)節(jié)點(diǎn)" }, { index: 8, childName: "第二個(gè)節(jié)點(diǎn)" }, { index: 9, childName: "第二個(gè)節(jié)點(diǎn)" }, { index: 10, childName: "第二個(gè)節(jié)點(diǎn)" }] }, { childList: [{ index: 11, childName: "第三個(gè)節(jié)點(diǎn)" }, { index: 12, childName: "第三個(gè)節(jié)點(diǎn)" }, { index: 13, childName: "第三個(gè)節(jié)點(diǎn)" }, { index: 14, childName: "第三個(gè)節(jié)點(diǎn)" }, { index: 15, childName: "第三個(gè)節(jié)點(diǎn)" }] }] } }) </script> </html>
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼,可得如下運(yùn)行結(jié)果:
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定,如何進(jìn)行綁定,如何進(jìn)行數(shù)據(jù)雙向綁定,感興趣的小伙伴們可以參考一下2016-09-09vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽功能
這篇文章主要介紹了vue中使用pdfjs-dist?+?turnjs實(shí)現(xiàn)頁面的翻書瀏覽,通過本文學(xué)習(xí)我們知道了pdfjs-dist 的工作原理是把獲取到的 pbf 的文件的數(shù)據(jù)流, 利用 canvas轉(zhuǎn)換成圖片,本文通過實(shí)例代碼詳解講解,需要的朋友可以參考下2022-10-10Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制
本文主要介紹了Vue中使用highlight.js實(shí)現(xiàn)代碼高亮顯示以及點(diǎn)擊復(fù)制,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01