您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)Vue如何實現(xiàn)導(dǎo)航欄菜單的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體內(nèi)容如下
這里是剛學(xué)習vue的時候,沒有用vue的任何UI組件庫寫的導(dǎo)航欄菜單。
menu.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導(dǎo)航欄左</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"> <!--導(dǎo)航欄左邊logo跟項目名稱--> <div class="navbar-header"> <a class="navbar_title" href="#" rel="external nofollow" >項目名稱</a> </div> <!--導(dǎo)航欄用戶登錄信息--> <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"> <!--左側(cè)菜單欄--> <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">菜單一的內(nèi)容</div> <div v-if="menu_index == 2">菜單二的內(nèi)容</div> <div v-if="menu_index == 3">菜單三的內(nèi)容</div> <div v-if="menu_index == 4">菜單四的內(nèi)容</div> <div v-if="menu_index == 5">菜單五的內(nèi)容</div> <div v-if="menu_index == 6">菜單六的內(nèi)容</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,index,menus){ this.nowIndex = index; //this.menu_index = index + 1; } } }); </script> </html>
效果圖如下:
關(guān)于Vue如何實現(xiàn)導(dǎo)航欄菜單的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。