怎么在vue.js中实现一个三级菜单效果
本篇文章为大家展示了怎么在vue.js中实现一个三级菜单效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
成都创新互联公司从2013年成立，先为吉木乃等服务建站，吉木乃等地企业，进行企业商务咨询服务。为吉木乃企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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中实现一个三级菜单效果
URL标题：
http://bjjierui.cn/article/gediip.html
