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+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)，全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
這篇文章主要介紹了Vue3.0靜態(tài)文件存放路徑與引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05
關(guān)于Vue Webpack2單元測(cè)試示例詳解
這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測(cè)試的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
Vue不同項(xiàng)目之間傳遞、接收參數(shù)問(wèn)題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問(wèn)題,主要針對(duì)是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請(qǐng)求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過(guò)濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
vue-cli3單頁(yè)構(gòu)建大型項(xiàng)目方案
這篇文章主要介紹了vue-cli3單頁(yè)構(gòu)建大型項(xiàng)目方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue如何使用element組件自定義v-loading問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
選擇省市區(qū)是我們大家在填寫(xiě)地址的時(shí)候經(jīng)常會(huì)遇到的一個(gè)功能，下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實(shí)現(xiàn)京東省市區(qū)三級(jí)聯(lián)動(dòng)選擇組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-11-11