使用v-for循環(huán)生成一個(gè)多級(jí)嵌套菜單欄,只要你學(xué)會(huì)了這個(gè)方法,幾乎所有的菜單欄都可以實(shí)現(xiàn)了。
創(chuàng)新互聯(lián)公司是專業(yè)的平頂山網(wǎng)站建設(shè)公司,平頂山接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行平頂山網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
方法
level-one{ text-indent: 1em; } level-two{ text-indent: 2em; } level-three{ text-indent: 3em; } bar1:[ /*所有第一級(jí)菜單*/ { title:'一級(jí)菜單(1)', id:1, //選項(xiàng)的唯一ID parentId:0, //父級(jí)的ID level:1 //所處的層級(jí) }, { title:'一級(jí)菜單(2)', id:2, parentId:0, level:1 }, { title:'一級(jí)菜單(3)', id:3, parentId:0, level:1, }, /*所有二級(jí)菜單*/ { title:'二級(jí)菜單(1.1)', id:4, parentId:1, level:2 }, { title:'二級(jí)菜單(1.2)', id:5, parentId:1, level:2 }, { title:'二級(jí)菜單(2.1)', id:6, parentId:2, level:2 }, { title:'二級(jí)菜單(2.2)', id:7, parentId:2, level:2 }, /*所有三級(jí)菜單*/ { title:'三級(jí)菜單(1.1.1)', id:8, parentId:4, level:3 }, { title:'三級(jí)菜單(1.1.2)', id:9, parentId:4, level:3 } ]
解釋:
1)菜單欄嵌套了多少層,就需要進(jìn)行多少次v-for循環(huán);
2)通過(guò)v-if來(lái)選擇level=1的選項(xiàng)作為最外層;
3)通過(guò)判斷選項(xiàng)的parentId等于上一層的id,來(lái)確定它是哪個(gè)選項(xiàng)的子級(jí)菜單;
實(shí)現(xiàn)效果
總結(jié)
以上所述是小編給大家介紹的vue2.0使用v-for循環(huán)制作多級(jí)嵌套菜單欄,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!