效果
参考
https://blog.csdn.net/futianwenA/article/details/83999129
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div-nav {
width: 100%;
height: 70px;
}
/*一级菜单*/
.menu-1 {
width: 140px;
height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
margin-left: 30px;
text-align: center;
line-height: 70px;
font-size: 20px;
}
.menu-1:hover {
background: dimgray;
}
/*二级菜单*/
.menu2-all {
margin-left: 140px;
display: none;
margin-top: -70px;
}
.menu-2 {
width: 140px;
height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
text-align: center;
line-height: 70px;
font-size: 20px;
}
.menu-2:hover {
background: dimgray;
}
/*三级菜单*/
.menu3-all {
position: relative;
left: 140px;
top: -70px;
display: none;
}
.menu-3 {
width: 140px;
height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
text-align: center;
line-height: 70px;
font-size: 20px;
}
.menu-1:hover .menu2-all {
display: block;
}
.menu-2:hover .menu3-all {
display: block;
}
.menu-3:hover {
background: dimgray;
}
</style>
</head>
<body>
<div id="app">
<div id="div-nav" v-for="(item,index) in nav.data">
<div class="menu-1" id="div-user">
{{item.name}}
<div class="menu2-all">
<div class="menu-2" id="div-write" v-for="(item2,index2) in item.second">
{{item2.name}}
<div class="menu3-all">
<div class="menu-3" v-for="(item3,index3) in item2.third">{{item3.name}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
//前后端分离,推荐后端返回给前端数据格式
//前后端分离,推荐后端返回给前端数据格式
nav: {
"status": 0, //执行状态码
"msg": "SUCCESS", //说明文字信息,没有为NULL
"data": [{ //对象中嵌套数组,数组是返回的数据,
"id": 1,
"name": "一级菜单",
"second": [{
"id": 11,
"name": "二级菜单",
"third": [{
"id": 111,
"name": "三级菜单1",
},
{
"id": 112,
"name": "三级菜单2",
},
{
"id": 113,
"name": "三级菜单3",
}
]
}]
}, {
"id": 2,
"name": "一级菜单2",
"second": [{
"id": 11,
"name": "二级菜单2",
"third": [{
"id": 111,
"name": "三级菜单4",
},
{
"id": 112,
"name": "三级菜单5",
},
]
},
{
"id": 113,
"name": "二级菜单3",
}
]
}]
},
message2: 'Hello Vue!',
},
components: {
},
methods: {
back: function() {
this.$router.back(-1);
}
}
})
</script>
</html>