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 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
详解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
投票管理程序
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
js中document.write的那点事
2014/12/12 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python实现在线翻译功能
2020/03/03 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
Delphi笔试题
2016/11/14 面试题
自我推荐书
2013/12/04 职场文书
高一新生军训感言
2014/03/02 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
路政管理求职信
2014/06/18 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
电子商务实训报告总结
2014/11/05 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
合作合同协议书范本
2015/01/27 职场文书
中小企业员工手册范本
2015/05/14 职场文书
部门主管竞聘书
2015/09/15 职场文书
Nginx快速入门教程
2021/03/31 Servers
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Linux安装Docker详细教程
2022/07/07 Servers