首先我们定义个组件！

menu.vue

模板内容！我简化一下！只展示需要注意的部分！

<template>
<li  v-for="(items,index) in nbav" :class="{'layui-nav-itemed' :index===isShow}"  @click="showToggle(index)">
<a href="javascript:;" >
<cite>{{items.name}}</cite>
</a>
<dl class="layui-nav-child">
<dd data-name="console"  v-for="menu in items.subnav" :class="{'layui-this':menu.link == linkClick}"  >
<a  @click = "treeNavSwitch(menu)" :lay-href="menu.link">{{menu.name}}</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</template>

模板位置值得注意的部分有几个！

1、循环的标记是

(items,index) in nbav

即可获得items的数组！ 和index循环的index! 0开始！

2、获取变量

注意的是在标签内是需要在标签前加

:class="items.name"的

如果是直接获取则是

{{items.name}}

3、判断运算！

:class="{'layui-nav-itemed' :index===isShow}"

则为如果index=isShow则显示layui-nav-itemed

4、循环内循环

如items.subnav是子菜单，那么可以继续进行循环

v-for="menu in items.subnav"

即可！

5、设置变量

在模板内

一定要

data () {

return {

return数据才可使用！

<script>
export default {
name: "menu",
// 定义属性，并设置初始值
data () {
return {
active: "home",
isShow:0,//判断nav显示
linkClick:'',//判断链接
nbav: [
{
name: "主页",
icon: "home",
active:true,
subnav: [
{ link: "#/link1", name: "织梦", click: true },
{ link: "#/link2", name: "织梦2" },
{ link: "#/link3", name: "织梦3" }
]
},
{
name: "主页1",
icon: "home2",
active:false,
subnav: [
{ link: "#/link4", name: "织梦4", click: false },
{ link: "#/link5", name: "织梦5" },
{ link: "#/link6", name: "织梦6" }
]
}
]
}
},

// 点击菜单使用的函数
methods: {
showToggle:function(index){
this.isShow = index;
},
treeNavSwitch:function(nav){
this.linkClick = nav.link;
}

}
};
</script>

6、做点击按钮！

和传统的点击click不一样的是！

我们这个需要用变量加增加来判断显示与隐藏！

首先我们增加一个变量

isShow:0,//判断nav显示

来判断下拉列表的显示！

因为我们前面循环的时候增加了index

那么我们在函数内把index传递过去即可！

@click="showToggle(index)"

showToggle:function(index){
this.isShow = index;
},

然后我们做子菜单的点击当前状态

增加变量linkClick！默认设置为空

:class="{'layui-this':menu.link == linkClick}"

 @click = "treeNavSwitch(menu)" :lay-href="menu.link"

同样的道理！我们直接把数组传递到函数内！

treeNavSwitch:function(nav){
this.linkClick = nav.link;
}

然后在a链接点击的时候获取当前的链接！

好了！ 完整的代码

<template>
<div class="layui-side layui-side-menu" id="menu">
<div class="layui-side-scroll">
<div class="layui-logo" lay-href="home/console.html">
<span>xhcss{{active}}</span>
</div>
<ul class="layui-nav layui-nav-tree">
<li  class="layui-nav-item "  v-for="(items,index) in nbav" :class="{'layui-nav-itemed' :index===isShow}"  @click="showToggle(index)">
<a href="javascript:;" >
<i class="layui-icon layui-icon-home"></i>
<cite>{{items.name}}</cite>
<span class="layui-nav-more"></span>
</a>
<dl class="layui-nav-child">
<dd data-name="console"  v-for="menu in items.subnav" :class="{'layui-this':menu.link == linkClick}"  >
<a  @click = "treeNavSwitch(menu)" :lay-href="menu.link">{{menu.name}}</a>
</dd>
</dl>
</li>

<span class="layui-nav-bar" style="top: 28px; height: 0px; opacity: 0;"></span>
</ul>
</div>
</div>
</template>

<script>
export default {
name: "menu",
// 定义属性，并设置初始值
data () {
return {
active: "home",
isShow:0,//判断nav显示
linkClick:'',//判断当前状态
nbav: [
{
name: "主页",
icon: "home",
active:true,
subnav: [
{ link: "#/link1", name: "织梦", click: true },
{ link: "#/link2", name: "织梦2" },
{ link: "#/link3", name: "织梦3" }
]
},
{
name: "主页1",
icon: "home2",
active:false,
subnav: [
{ link: "#/link4", name: "织梦4", click: false },
{ link: "#/link5", name: "织梦5" },
{ link: "#/link6", name: "织梦6" }
]
}
]
}
},

// 点击菜单使用的函数
methods: {
showToggle:function(index){
this.isShow = index;
con
},
treeNavSwitch:function(nav){
this.linkClick = nav.link;
}

}
};
</script>

<style>
</style>