Vue实现导航栏的显示开关控制
更新时间：2019年11月01日 09:58:07 作者：KOLO86
今天小编就为大家分享一篇Vue实现导航栏的显示开关控制，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一，制作导航栏
<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>
个人中心
</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>
二，在将导航栏加在路由视图下面
三，Vuex中的state来控制该导航栏的显示与关闭状态
3.1 定义state中状态
3.2 全局引入上面的文件
四，控制导航栏的显示与关闭
4.1打开导航栏
4.2 关闭导航栏
以上这篇Vue实现导航栏的显示开关控制就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中使用element组件时事件想要传递其他参数的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue项目使用CDN优化首屏加载问题,本文以vue、vuex、vue-touter为例，给大家介绍处理流程，需要的朋友可以参考下2018-04-04
vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解
这篇文章主要介绍了vue如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI2024-07-07
,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。2016-12-12
这篇文章主要介绍了vue elementUI 上传非空验证,原理就是写一个假的红色*号,每次点击查看的时候执this.rules.staffImg[0].required = false,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-12-12
今天小编就为大家分享一篇vue-resource:jsonp请求百度搜索的接口示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue-cli打包后本地运行dist文件中的index.html操作
这篇文章主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了关于axios在vue中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后会发现或多或少的问题,这篇文章主要给大家介绍了关于vue项目本地开发完成后部署到服务器后报404错误的解决方案,需要的朋友可以参考下2024-01-01
最新评论