vue实现菜单循环展示效果(三级菜单展示)
涉及技术栈
layui+bootstrap+vue，项目布局时请引入相应库文件。源码获取：关注公众号 扣丁曼 回复
vue菜单获取源代码。
1、效果图
2、项目代码
顶部分类栏代码
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<button @click="changeMenu(1)" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">系统button>
li>
<li class="layui-nav-item">
<button @click="changeMenu(2)" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">院感button>
li>
<li class="layui-nav-item">
<button data-id="2" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">办公button>
li>
<li class="layui-nav-item">
<button data-id="3" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">质控button>
li>
<li class="layui-nav-item">
<button data-id="4" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">病案button>
li>
ul>
页面展示li列表（左侧菜单栏）
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo">
<span>高级后台系统span>
div>
<ul class="layui-nav layui-nav-tree " id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu" lay-shrink="all">
<li v-for="(val,key) in menus" data-name="home" class="layui-nav-item">
<a v-if="val.son.length" href="javascript:;" :lay-tips='val.name' lay-direction="2">
<i class="fa fa-paste layui-font">i>
<cite v-text='val.name'>cite>
<span class="layui-nav-more">span>
a>
<a v-else :lay-href="val.url" :lay-tips='val.name' lay-direction="2">
<i class="fa fa-home layui-font">i>
<cite v-text='val.name'>cite>
a>
<dl v-if="val.son.length" class="layui-nav-child">
<dd v-for="(v,k) in val.son" data-name="console" class="">
<a :lay-href="v.son.length ? ' javascript:; ' : v.url">{{v.name}}a>
<dl v-if="v.son.length" class="layui-nav-child">
<dd v-for="(vv,kk) in v.son" data-name="console" class="">
<a :lay-href="vv.son.length ? 'javascript:; ' : v.url">{{vv.name}}a>
dd>
dl>
dd>
dl>
li>
ul>
div>
div>
页面js代码（vue部分）
<script>
var vm = new Vue({
el: '#LAY_app',
data: {
menus: [{
"name": "欢迎页",
"url": "/indexPage",
"icon": "",
"son": []
}, {
"name": "文章管理",
"url": "/index/orders",
"icon": "layui-font",
"son": [{
"name": "文章列表",
"url": "/article",
"icon": "",
"son": []
}, {
"name": "文章分类",
"url": "/index_cate",
"icon": "",
"son": []
}, {
"name": "二级菜单",
"url": "/index_s",
"icon": "",
"son": [{
"name": "三级菜单",
"url": "/index_sj",
"icon": "",
"son": []
}]
}]
},
{
"name": "系统设置",
"url": "/system",
"icon": "",
"son": [
{
"name": "用户设置",
"url": "/system",
"icon": "",
"son": []
},
{
"name": "权限设置",
"url": "/system",
"icon": "",
"son": []
}
]
},
]
},
methods: {
changeMenu: function (id) {
//初始化tab标签,如果未使用tab选项卡则注释下面一行
$("#tab-home").siblings().remove();
this.menus = [{
"name": "广告管理",
"url": "/index/orders",
"icon": "",
"key": true,
"son": [{
"name": "广告列表",
"url": "/adv",
"icon": "",
"son": []
}, {
"name": "其他",
"url": "#",
"icon": "",
"son": []
}]
}]
}
}
})
</script>