溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用v-for循環生成一個多級嵌套菜單欄，只要你學會了這個方法，幾乎所有的菜單欄都可以實現了。
方法
<div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a>
<div class="level-two" v-if="obj1.parentId == obj.id " v-for="obj1 in bar1"><a>{{obj1.title}}</a>
<div class="level-three" v-if="obj2.parentId == obj1.id" v-for="obj2 in bar1"><a>{{obj2.title}}</a></div>
</div>
</div>
level-one{
text-indent: 1em;
}
level-two{
text-indent: 2em;
}
level-three{
text-indent: 3em;
}
bar1:[
/*所有第一級菜單*/
{
title:'一級菜單（1）',
id:1, //選項的唯一ID
parentId:0, //父級的ID
level:1 //所處的層級
},
{
title:'一級菜單（2）',
id:2,
parentId:0,
level:1
},
{
title:'一級菜單（3）',
id:3,
parentId:0,
level:1,
},
/*所有二級菜單*/
{
title:'二級菜單（1.1）',
id:4,
parentId:1,
level:2
},
{
title:'二級菜單（1.2）',
id:5,
parentId:1,
level:2
},
{
title:'二級菜單（2.1）',
id:6,
parentId:2,
level:2
},
{
title:'二級菜單（2.2）',
id:7,
parentId:2,
level:2
},
/*所有三級菜單*/
{
title:'三級菜單（1.1.1）',
id:8,
parentId:4,
level:3
},
{
title:'三級菜單（1.1.2）',
id:9,
parentId:4,
level:3
}
]
解釋：
1）菜單欄嵌套了多少層，就需要進行多少次v-for循環；
2）通過v-if來選擇level=1的選項作為最外層；
3）通過判斷選項的parentId等于上一層的id，來確定它是哪個選項的子級菜單；
實現效果
總結
以上所述是小編給大家介紹的vue2.0使用v-for循環制作多級嵌套菜單欄，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
