vue2.0使用v-for循环制作多级嵌套菜单栏

前端之家收集整理的这篇文章主要介绍了vue2.0使用v-for循环制作多级嵌套菜单栏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了。

方法

{{obj.title}}
{{obj1.title}}
{{obj2.title}}

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,level:1,},/所有二级菜单/
{
title:'二级菜单(1.1)',id:4,parentId:1,level:2
},{
title:'二级菜单(1.2)',id:5,{
title:'二级菜单(2.1)',id:6,parentId:2,{
title:'二级菜单(2.2)',id:7,/所有三级菜单/
{
title:'三级菜单(1.1.1)',id:8,parentId:4,level:3
},{
title:'三级菜单(1.1.2)',id:9,level:3
}
]

解释:

1)菜单栏嵌套了多少层,就需要进行多少次v-for循环;

2)通过v-if来选择level=1的选项作为最外层;

3)通过判断选项的parentId等于上一层的id,来确定它是哪个选项的子级菜单

实现效果

总结

以上所述是小编给大家介绍的vue2.0使用v-for循环制作多级嵌套菜单栏。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章