vue——双层循环嵌套
1.首先你的json数据至少是两层结构menus: [{"Name": "景区概况","Items": [{"Score": "景区简介", "path": "/Ov
·
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.注意两次循环的每一项是不同的对象,要起不一样的名字;多层循环同理,一定要把数据结构写对(当然数据是后端返回的话当我没说。
更多推荐
已为社区贡献3条内容
所有评论(0)