vue——双层循环嵌套

1.首先你的json数据至少是两层结构

 menus: [
          {
            "Name": "景区概况",
            "Items": [
              {"Score": "景区简介", "path": "/OverviewContent/OerviewIntroduce"},
              {"Score": "景区掠影", "path": "/OverviewContent/shufty"},
              {"Score": "组织机构", "path": "/OverviewContent/institutional"}]
          },
          {
            "Name": "景区新闻",
            "Items": [
              {"Score": "新闻中心", "path": "/news/News"},
              {"Score": "通知公告", "path": "/news/InForm"}]
          },
          {
            "Name": "藏品欣赏",
            "Items": [
              {"Score": "藏品展示", "path": "/collectionContent/products"},
              {"Score": "文物故事", "path": "/collectionContent/CulturalStory"},
              {"Score": "亲切留念", "path": "/collectionContent/souvenir"}]
          }
     ]

2.外层循环循环的是menus,内层循环循环menus里的Ttems

 <div v-for="(i,c) in menus" :k="c" class="index-footnav">
          <h6>{{i.Name}}</h6>
          <ul>
             <li v-for="(a,d) in i.Items" :k="d">
                <router-link :to="{path:a.path}">
                  {{a.Score}}
                </router-link>
              </li>
          </ul>
   </div>

3.注意两次循环的每一项是不同的对象，要起不一样的名字；多层循环同理，一定要把数据结构写对（当然数据是后端返回的话当我没说。