快捷導(dǎo)航

Vue實(shí)現(xiàn)導(dǎo)航欄菜單

更新時(shí)間：2020年08月19日 17:01:32 作者：努力學(xué)習(xí)滴程序媛

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)導(dǎo)航欄菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)導(dǎo)航欄菜單的具體代碼，供大家參考，具體內(nèi)容如下

這里是剛學(xué)習(xí)vue的時(shí)候，沒有用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" />
 <link rel="stylesheet" href="css/titleMenuLeft.css" />
 <script type="text/javascript" src="js/vue.min.js" ></script>
 </head>
 <body>
 <nav class="title" role="navigation">
 <div class="container-fluid">
 <!--導(dǎo)航欄左邊logo跟項(xiàng)目名稱-->
 <div class="navbar-header">
 <a class="navbar_title" href="#" >項(xiàng)目名稱</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>

效果圖如下：

學(xué)會(huì)這個(gè)之后，大家可以學(xué)習(xí)下vue的相關(guān)UI組件庫，那樣更簡(jiǎn)單，做出來的效果也更漂亮喲

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex實(shí)現(xiàn)數(shù)據(jù)狀態(tài)持久化
今天小編就為大家分享一篇vuex實(shí)現(xiàn)數(shù)據(jù)狀態(tài)持久化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue.js原理分析之observer模塊詳解
這篇文章主要介紹了Vue.js中observer模塊的相關(guān)資料，文中通過原理分析介紹還是相對(duì)的詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-02-02
vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例
本文主要介紹了vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
axios請(qǐng)求的一些常見操作實(shí)戰(zhàn)指南
axios是一個(gè)輕量的HTTP客戶端,它基于XMLHttpRequest服務(wù)來執(zhí)行 HTTP請(qǐng)求,支持豐富的配置,支持Promise,支持瀏覽器端和 Node.js 端,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求的一些常見操作,需要的朋友可以參考下
2022-09-09
Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，對(duì)Vue封裝axios網(wǎng)絡(luò)請(qǐng)求相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-11-11
Vue組件之自定義事件的功能圖解
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
詳解element-ui表格的合并行和列(非常細(xì)節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
項(xiàng)目中一鍵添加husky實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了項(xiàng)目中一鍵添加husky實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09