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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
js实现抽奖效果
Mar 27 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
vue文件运行的方法教学
Feb 12 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
jQuery实现简单全选框
Sep 13 jQuery
浅谈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中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python中PIL安装简单教程
2016/04/21 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
pandas数据集的端到端处理
2019/02/18 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
一文读懂Python 枚举
2020/08/25 Python
python 8种必备的gui库
2020/08/27 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
JSF界面控制层技术
2013/06/17 面试题
我的五年职业生涯规划
2014/01/23 职场文书
护士毕业生自荐信
2014/02/07 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
面试通知短信
2015/04/20 职场文书
兴趣班停课通知
2015/04/24 职场文书
小学副班长竞选稿
2015/11/21 职场文书
班委竞选稿范文
2015/11/21 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript