Vue實(shí)現(xiàn)導(dǎo)航欄的顯示開關(guān)控制
更新時(shí)間：2019年11月01日 09:58:07 作者：KOLO86
今天小編就為大家分享一篇Vue實(shí)現(xiàn)導(dǎo)航欄的顯示開關(guān)控制，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
一，制作導(dǎo)航欄
<template>
<div class="space_header_text">
<ul>
<router-link to="/order">
<li class="nav-item">
<div :class="['iconfont','interval','iconClass']"></div>
訂單
</li>
</router-link>
<router-link to="/account">
<li class="nav-item">
<div :class="['iconfont','interval','iconClass']"></div>
賬戶
</li>
</router-link>
<router-link to="/self">
<li class="nav-item">
<div :class="['iconfont','interval','iconClass']"></div>
個(gè)人中心
</li>
</router-link>
</ul>
</div>
</template>
<script>
export default{
name:'space'
}
</script>
<style scoped>
.space_header_text{
position:fixed;
z-index:99;
width: 100%;
}
.nav-item{
float: left;
width: 33.3%;
text-align: center;
margin: 0 0 .16rem 0;
}
.iconClass{
margin: .16rem auto;
}
</style>
二，在將導(dǎo)航欄加在路由視圖下面
三，Vuex中的state來控制該導(dǎo)航欄的顯示與關(guān)閉狀態(tài)
3.1 定義state中狀態(tài)
3.2 全局引入上面的文件
四，控制導(dǎo)航欄的顯示與關(guān)閉
4.1打開導(dǎo)航欄
4.2 關(guān)閉導(dǎo)航欄
以上這篇Vue實(shí)現(xiàn)導(dǎo)航欄的顯示開關(guān)控制就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的方法
對(duì)于瀏覽器來說,文本、圖片等可以直接打開的文件,不會(huì)進(jìn)行自動(dòng)下載,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題
這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例，給大家介紹處理流程，需要的朋友可以參考下2018-04-04
vue動(dòng)態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個(gè)動(dòng)態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI2024-07-07
,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要介紹了vue elementUI 上傳非空驗(yàn)證,原理就是寫一個(gè)假的紅色*號(hào),每次點(diǎn)擊查看的時(shí)候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
vue-resource:jsonp請(qǐng)求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-cli打包后本地運(yùn)行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運(yùn)行dist文件中的index.html操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案
很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測(cè)試沒有什么問題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下2024-01-01