鍍金池/ 問答/HTML/ 如何使用v-for循環(huán)出多層嵌套？

如何使用v-for循環(huán)出多層嵌套？

如下例所示，有這樣一個結(jié)構(gòu)的對象，需要用v-for循環(huán)出來
結(jié)構(gòu)型如：(dl>(dt>dl2+dt>dl3))*4
對象型如：

 sheet: {
        firstList:{
          firstTitle: {
            value: '練習(xí)冊',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         secondtList:{
          firstTitle: {
            value: '練習(xí)冊',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         thirdList:{
          firstTitle: {
            value: '練習(xí)冊',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        },
         fourthtList:{
          firstTitle: {
            value: '練習(xí)冊',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)'
            },
            secondTitle: {
            value: '課本',
            course: {
              lesson1: '物理',
              lesson2: '化學(xué)',
              lesson3: '生物'
            }
          }
        }
回答
編輯回答
短嘆

首先，先給你一個官方的鏈接地址： https://vuefe.cn/v2/guide/lis...

最后，雖然不知道你最終想循環(huán)成啥樣，我這兒就隨便寫一個，你結(jié)合文檔參考試試(不知道對不對，大概是這么個意思)：

<div v-for="outerVal in sheet">  //sheet
    <div v-for="(middleVal,middleKey) in outerVal">  //List
            {{middleKey.value}}   //title的值
        <div v-for="innerVal in middleKey.course">  //Title
            {{innerVal}}  //課程值
        </div>
    </div>
</div>
2018年8月22日 22:27