vue实现菜单循环展示效果(三级菜单展示)

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部分）