怎么在vue.js中實(shí)現(xiàn)一個(gè)三級(jí)菜單效果
本篇文章為大家展示了怎么在vue.js中實(shí)現(xiàn)一個(gè)三級(jí)菜單效果，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司從2013年成立，先為吉木乃等服務(wù)建站，吉木乃等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為吉木乃企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
html部分
{{firstList.title}}
{{secondList.title}}
{{thirdList}}
js部分
var app = new Vue({
el:"#warp",
data:{
menuData: {
firstList:{
title:'練習(xí)冊(cè)1',
value: [
{
title:"物理",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"化學(xué)",
value2:[
"暑期",
"寒假",
"周末"
]
},
],
},
secondList:{
title:'練習(xí)冊(cè)2',
value: [
{
title:"政治",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"地理",
value2:[
"暑期",
"寒假",
"周末"
]
},
],
},
thirdList:{
title:'練習(xí)冊(cè)3',
value: [
{
title:"語文",
value2:[
"暑期",
"寒假",
"周末"
]
},
{
title:"數(shù)學(xué)",
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;
}上述內(nèi)容就是怎么在vue.js中實(shí)現(xiàn)一個(gè)三級(jí)菜單效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前名稱：怎么在vue.js中實(shí)現(xiàn)一個(gè)三級(jí)菜單效果
分享地址：
http://weahome.cn/article/gediip.html
重慶分公司
重慶分公司
