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


Posted in Javascript onJune 25, 2018

使用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循环制作多级嵌套菜单栏

总结

以上所述是小编给大家介绍的vue2.0使用v-for循环制作多级嵌套菜单栏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
D3.js实现拓扑图的示例代码
Jun 30 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
浅谈super-vuex使用体验
Jun 25 #Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 #Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 #Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
You might like
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
php文件包含的几种方式总结
2019/09/19 PHP
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vxe-table vue table 表格组件功能
2019/05/26 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
详解python中的模块及包导入
2019/08/30 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
解析Python3中的Import
2019/10/13 Python
班组长的岗位职责
2013/12/09 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
公司2014年度工作总结
2014/12/10 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
学生评语集锦
2015/01/04 职场文书
如何写新闻稿
2015/07/18 职场文书
社区服务活动感想
2015/08/11 职场文书
人力资源部工作计划
2019/05/14 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
使用Python解决图表与画布的间距问题
2022/04/11 Python