使用v-for循環(huán)生成一個(gè)多級(jí)嵌套菜單欄，只要你學(xué)會(huì)了這個(gè)方法，幾乎所有的菜單欄都可以實(shí)現(xiàn)了。
方法
<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:[ /*所有第一級(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ì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
