Vue實現(xiàn)導(dǎo)航欄菜單
更新時間：2020年08月19日 17:01:32 作者：努力學(xué)習(xí)滴程序媛
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)導(dǎo)航欄菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)導(dǎo)航欄菜單的具體代碼，供大家參考，具體內(nèi)容如下
這里是剛學(xué)習(xí)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" />
<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跟項目名稱-->
<div class="navbar-header">
<a class="navbar_title" href="#" >項目名稱</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é)會這個之后，大家可以學(xué)習(xí)下vue的相關(guān)UI組件庫，那樣更簡單，做出來的效果也更漂亮喲
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vuex實現(xiàn)數(shù)據(jù)狀態(tài)持久化
今天小編就為大家分享一篇vuex實現(xiàn)數(shù)據(jù)狀態(tài)持久化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue.js中observer模塊的相關(guān)資料，文中通過原理分析介紹還是相對的詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要為大家詳細(xì)介紹了vue移動端實現(xiàn)手指滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實現(xiàn)示例
本文主要介紹了vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
axios是一個輕量的HTTP客戶端,它基于XMLHttpRequest服務(wù)來執(zhí)行 HTTP請求,支持豐富的配置,支持Promise,支持瀏覽器端和 Node.js 端,下面這篇文章主要給大家介紹了關(guān)于axios請求的一些常見操作,需要的朋友可以參考下2022-09-09
Vue簡單封裝axios網(wǎng)絡(luò)請求的方法
這篇文章主要介紹了Vue簡單封裝axios網(wǎng)絡(luò)請求,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，對Vue封裝axios網(wǎng)絡(luò)請求相關(guān)知識感興趣的朋友一起看看吧2022-11-11
本文通過圖文并茂的形式給大家介紹了Vue組件之自定義事件的功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
詳解element-ui表格的合并行和列(非常細(xì)節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了項目中一鍵添加husky實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09