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í)候，沒(méi)有用vue的任何UI組件庫(kù)寫(xiě)的導(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組件庫(kù)，那樣更簡(jiǎn)單，做出來(lái)的效果也更漂亮喲
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
- Vue3?封裝?Element?Plus?Menu?無(wú)限級(jí)菜單組件功能的詳細(xì)代碼
- Vue3+ElementPlus 表單組件的封裝實(shí)例
- Vue3+Vite+TS實(shí)現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
- Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
- ant design vue導(dǎo)航菜單與路由配置操作
- vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法
- Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法
- vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
相關(guān)文章
Vue模擬響應(yīng)式原理底層代碼實(shí)現(xiàn)的示例
最近去面試的人都會(huì)有這個(gè)體會(huì),去年面試官只問(wèn)我怎么用vue,今年開(kāi)始問(wèn)我vue響應(yīng)式原理，本文就詳細(xì)的介紹一下2021-08-08
推薦一款簡(jiǎn)易的solid?js消息UI庫(kù)使用詳解
這篇文章主要為大家介紹了推薦一款簡(jiǎn)易的solid-js消息UI庫(kù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹一下Vue中$nextTick的作用于原理,這也是面試中常常考到的問(wèn)題,文中的示例代碼講解詳細(xì),對(duì)我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下2023-10-10
Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽(tīng)功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽(tīng)功能,實(shí)現(xiàn)思路非常簡(jiǎn)單，本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開(kāi)始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue組件的繼承用法,本文通過(guò)實(shí)例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
vue監(jiān)聽(tīng)路由變化的幾種方式小結(jié)
這篇文章主要介紹了vue監(jiān)聽(tīng)路由變化的幾種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實(shí)例有一個(gè)完整的生命周期，也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載?Dom、渲染,下面文章詳細(xì)介紹,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了vue3+vite+ts之a(chǎn)xios的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01