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)文章
Vue模擬響應(yīng)式原理底層代碼實現(xiàn)的示例
最近去面試的人都會有這個體會,去年面試官只問我怎么用vue,今年開始問我vue響應(yīng)式原理，本文就詳細(xì)的介紹一下2021-08-08
這篇文章主要為大家介紹了推薦一款簡易的solid-js消息UI庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹一下Vue中$nextTick的作用于原理,這也是面試中常常考到的問題,文中的示例代碼講解詳細(xì),對我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下2023-10-10
Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能,實現(xiàn)思路非常簡單，本文結(jié)合實例代碼效果圖給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
時分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因為月是1-12月,而時分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時間的年月日時分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue組件的繼承用法,本文通過實例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載?Dom、渲染,下面文章詳細(xì)介紹,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了vue3+vite+ts之a(chǎn)xios的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01