vue三级菜单渲染_vue.js实现三级菜单效果

本文实例为大家分享了vue.js实现三级菜单的具体代码，供大家参考，具体内容如下YfS免费资源网

html部分YfS免费资源网

• {{firstList.title}}
  • {{secondList.title}}
    • {{thirdList}}

js部分YfS免费资源网

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部分YfS免费资源网

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;

}