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

 
{{i.Name}}
  • {{a.Score}}

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

你可能感兴趣的:(vue,前端开发,vue双层循环)