怎么在vue.js中实现一个三级菜单效果-创新互联
本篇文章为大家展示了怎么在vue.js中实现一个三级菜单效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
在望奎等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站设计、
成都外贸网站建设 网站设计制作
定制网站建设,公司网站建设,企业网站建设,
成都品牌网站建设,
成都全网营销,
成都外贸网站建设公司,望奎网站建设费用合理。
html部分
{{firstList.title}}
{{secondList.title}}
{{thirdList}}
js部分
var app = new Vue({
el:"#warp",
data:{
menuData: {
firstList:{
title:'练习册1',
value: [
{
title:"物理",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"化学",
value2:[
"暑期",
"寒假",
"周末"
]
},
],
},
secondList:{
title:'练习册2',
value: [
{
title:"政治",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"地理",
value2:[
"暑期",
"寒假",
"周末"
]
},
],
},
thirdList:{
title:'练习册3',
value: [
{
title:"语文",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"数学",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"英语",
value2:[
"暑期",
"寒假",
"周末"
]
},
],
}
},
},
});css部分
body{
max-width: 640px;
margin: 0px auto;
font-size: 14px;
color: #666666;
background-color: #ffffff;
}
ul{
padding: 0px;
}
li{
list-style: none;
}
#menu{
display: flex;
justify-content: space-between;
}
.firstLevel{
position: relative;
min-width: 100px;
cursor: pointer;
}
.secondLevel{
display: none;
margin-left: 10px;
}
.firstLevel:hover .secondLevel{
display: block;
}
.thirdLevel{
display: none;
margin-left: 15px;
width: 40px;
}
.secondLevel:hover .thirdLevel{
display: block;
}上述内容就是怎么在vue.js中实现一个三级菜单效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
本文名称：怎么在vue.js中实现一个三级菜单效果-创新互联
文章网址：
http://bjjierui.cn/article/dhdjes.html
