本篇文章為大家展示了怎么在vue.js中實現(xiàn)一個三級菜單效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年成立，先為吉木乃等服務建站，吉木乃等地企業(yè)，進行企業(yè)商務咨詢服務。為吉木乃企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

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:"數(shù)學",
      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中實現(xiàn)一個三級菜單效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標題：怎么在vue.js中實現(xiàn)一個三級菜單效果
URL地址：http://chinadenli.net/article8/gediip.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、移動網站建設、云服務器、網頁設計公司、做網站、外貿網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)