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

2024-07-29 08:10:18

使用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循环制作多级嵌套菜单栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
vue二级菜单导航点击选中事件的方法

因为没有使用vue做一个真正完整的项目,所以乘着这个项目比较闲的时间,对标项目用vue做一些页面,丰富自己的项目经验.所以接下来基本都是一些简单的功能. 目标:一级导航点击收缩展开,二级导航点击选中源码主要是思路,具体的就不放了 <ul class="sidebar-menu"> <li class="treeNav" v-for="(item,index) in configNav"> <a href=&quo
利用vue-router实现二级菜单内容转换

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能.如果是平常的做法就是改变url,跳到相应的页面:还有一种就是frame. 如果用vue的话,可以用vue-router改变<router-view>里面的组件,这样就能做到不刷新页面都能跳到相应"页面".其实url地址还是变了,但是他没有刷新页面其他位置的内容,只是改变了<router-view>里面的组件,渲染了新的组件. 在线demo:http://runjs.cn/code/9th3cgxo html
vue多级多选菜单组件开发

本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选:反之,没达到全选时,父标题栏的勾选图标自动取消勾选当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选:反之,没达到全选时,最底下那个全选框自动取消勾选点击最底下那个全选框可以全选或取消全部的勾选图标所以总结起来我们重点要利
vue侧边栏动态生成下级菜单的方法

循环传入的数据去生成下级菜单 <template> <div class="headBar"> <div class="title"> 微商城管理后台 </div> <el-menu class="el-menu-headBar" mode="horizontal" @select="handleSelect" background-color=&quo
vue.js 左侧二级菜单显示与隐藏切换的实例代码

废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type
Vue2组件tree实现无限级树形菜单

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
Vue iview-admin框架二级菜单改为三级菜单的方法

最近在用 iview-admin的Vue后台模板,从git上下载后发现左侧导航栏最多支持到二级菜单,也发现很多童鞋在问如何实现三级菜单.在实际的应用场景中还是会出现三级菜单的需求的,木有其他好办法,只能自己手动改代码了. 1. 第一步:首先改写VUE中的模板,修改sidebarMenu.vue文件,文件具体目录建下图: 将Menu导航菜单组件的的二级嵌套结构改为三级嵌套,无非就是判断二级路由页面下是否有children属性及是否含有子元素,有的话直接v-for循环生成子元素标签,新结构如下: <
vue.js实现二级菜单效果

本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g
vue单个组件实现无限层级多选菜单功能

wTree.vue 原理:每一个多选框都是一个节点,每个节点就是一个wTree组件,有父级(顶级level为0),有子级(底层list[]是空的),组件之间状态传递是通过组件通信传递,对于外部数据checkList数组的修改是通过store实现的.初始化从底层状态传递到上层,一层一层传递.改变状态,不同状态改变,修改checklist数组.大概就这个思路,下面是代码: <template> <div> <div > <span v-for="o in

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

相关推荐

随机推荐