vue.js实现三级菜单效果
作者：chong_po
这篇文章主要为大家详细介绍了vue.js实现三级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js实现三级菜单的具体代码，供大家参考，具体内容如下
html部分
<div id="warp">
<ul id="menu">
<li class="firstLevel" v-for="(firstList,index) in menuData">{{firstList.title}}
<ul v-if="firstList.value">
<li class="secondLevel" v-for="(secondList,index) in firstList.value">{{secondList.title}}
<ul class="thirdLevel">
<li v-for="(thirdList,index) in secondList.value2">{{thirdList}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。