Vue实现导航栏的显示开关控制


Posted in Javascript onNovember 01, 2019

一,制作导航栏

<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>

二,在将导航栏加在路由视图下面

Vue实现导航栏的显示开关控制

三,Vuex中的state来控制该导航栏的显示与关闭状态

3.1 定义state中状态

Vue实现导航栏的显示开关控制

3.2 全局引入上面的文件

Vue实现导航栏的显示开关控制

四,控制导航栏的显示与关闭

4.1打开导航栏

Vue实现导航栏的显示开关控制

4.2 关闭导航栏

Vue实现导航栏的显示开关控制

以上这篇Vue实现导航栏的显示开关控制就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
python常见的格式化输出小结
2016/12/15 Python
python逆序打印各位数字的方法
2018/06/25 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
致400米运动员广播稿
2014/02/07 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
战略合作意向书
2014/07/29 职场文书
健康状况证明模板
2014/10/23 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
祝寿主持词
2015/07/02 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Elasticsearch 数据类型及管理
2022/04/19 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS