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">
                <!--非一级栏目则使用href跳转并禁止跳转-->
                <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>
                <!-- 一级栏目则使用lay-href跳转 -->
                <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>