介绍 & lt; div id=皐arp"比;
,& lt; ul id=癿enu"比;
,& lt; li 类=癴irstLevel", v=?firstList、索引),拷贝menuData"在{{firstList.title}},
& lt;才能ul v=癴irstList.value"比;
& lt;才能li 类=皊econdLevel", v=?secondList、索引),拷贝firstList.value"在{{secondList.title}}
,,& lt; ul 类=皌hirdLevel"比;
,,& lt; li v=?thirdList、索引),拷贝secondList.value2"在{{thirdList}} & lt;/li>
,,& lt;/ul>
& lt;才能/li>,,
& lt;才能/ul>
,& lt;/li>
,& lt;/ul>
& lt;/div> var app =, Vue ({new
,埃尔:“# warp"
,数据:{
,menuData: {
,,,,firstList: {
,,,,标题:& # 39;练习册1 & # 39;,,
,,,,的值:,(
,,,,,{
,,,,,标题:“物理“,
,,,,,value2:(
,,,,,,“暑期“,
,,,,,,“寒假“,
,,,,,,“周末“;
,,,,,)
,,,,,},
,,,,,{
,,,,,标题:“化学“,
,,,,,value2:(
,,,,,“暑期“,
,,,,,“寒假“,
,,,,,“周末“;
,,,,,)
,,,,,},
,,,,,
,,},
,,secondList: {
,,,标题:& # 39;练习册2 & # 39;,,
,,,,的值:,(
,,,,,{
,,,,,标题:“政治“,
,,,,,value2:(
,,,,,,“暑期“,
,,,,,,“寒假“,
,,,,,,“周末“;
,,,,,)
,,,},
,,,,,{
,,,,,标题:“地理“,
,,,,,value2:(
,,,,,“暑期“,
,,,,,“寒假“,
,,,,,“周末“;
,,,,,)
,,,,,},
,,,,,
,,},
,,thirdList: {
,,,标题:& # 39;练习册3 & # 39;,,
,,,,的值:,(
,,,,,{
,,,,,标题:“语文“,
,,,,,value2:(
,,,,,,“暑期“,
,,,,,,“寒假“,
,,,,,,“周末“;
,,,,,)
,,,},
,,,,,{
,,,,,标题:“数学“,
,,,,,value2:(
,,,,,,“暑期“,
,,,,,,“寒假“,
,,,,,,“周末“;
,,,,,)
,,,,,},
,,,,,{
,,,,,标题:“英语“,
,,,,,value2:(
,,,,,,“暑期“,
,,,,,,“寒假“,
,,,,,,“周末“;
,,,,,)
,,,,,},
,,,,,
,,}
},,,,,,
},
}); 身体{
,max-width: 640 px;
,保证金:0 px 汽车;
,字体大小:14 px;
,颜色:# 666666;
,background - color: # ffffff;
}
ul {
,填充:0 px;
}
李{
,list-style:没有;
}
#{菜单
,显示:flex;
,justify-content:之间的空间;
}
.firstLevel {
,位置:相对;
,min-width: 100 px;
,光标:指针;
}
.secondLevel {
,显示:没有;
,margin-left: 10 px;
}
.firstLevel: hover .secondLevel {
,显示:块;
}
.thirdLevel {
,显示:没有;
,margin-left: 15 px;
,宽度:40像素;
}
.secondLevel: hover .thirdLevel {
,显示:块;
null
本篇文章为大家展示了怎么在vue。js中实现一个三级菜单效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
html部分
js部分
css部分
