Vue實現導航欄選單
阿新 • • 發佈:2020-08-20
本文例項為大家分享了Vue實現導航欄選單的具體程式碼,供大家參考,具體內容如下
這裡是剛學習vue的時候,沒有用vue的任何UI元件庫寫的導航欄選單。
menu.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航欄左</title> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" href="css/titleMenuLeft.css" rel="external nofollow" /> <script type="text/javascript" src="js/vue.min.js" ></script> </head> <body> <nav class="title" role="navigation"> <div class="container-fluid"> <!--導航欄左邊logo跟專案名稱--> <div class="navbar-header"> <a class="navbar_title" href="#" rel="external nofollow" >專案名稱</a> </div> <!--導航欄使用者登入資訊--> <div class="navbar_user"> <img src="img/ani1.jpg"/> <span>您好,使用者!</span> </div> </div> </nav> <div class="body" id="body"> <div class="container"> <div class="row"> <!--左側選單欄--> <div class="col-md-1 menu"> <ul class="nav menu_ul"> <li v-for="(menu,index) in menus" v-bind:id="menu.id" v-bind:class="{checked: index == nowIndex}" v-on:click="setTab('menu',index,menus)"> {{ menu.text }} </li> </ul> </div> <!--選單切換主題--> <div class="col-md-11"> <div v-if="menu_index == 1">選單一的內容</div> <div v-if="menu_index == 2">選單二的內容</div> <div v-if="menu_index == 3">選單三的內容</div> <div v-if="menu_index == 4">選單四的內容</div> <div v-if="menu_index == 5">選單五的內容</div> <div v-if="menu_index == 6">選單六的內容</div> </div> </div> </div> </div> <div class="footer"></div> </body> <script> var nav = new Vue({ el: '#body',data: { menus: [ {text: '選單一'},{text: '選單二'},{text: '選單三'},{text: '選單四'},{text: '選單五'},{text: '選單六'} ],nowIndex: 0,menu_index: 1 },methods: { setTab: function(name,menus){ this.nowIndex = index; //this.menu_index = index + 1; } } }); </script> </html>
效果圖如下:
學會這個之後,大家可以學習下vue的相關UI元件庫,那樣更簡單,做出來的效果也更漂亮喲^_^