Vue实现导航栏菜单


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下

这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单。

menu.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>导航栏左</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">
 <!--导航栏左边logo跟项目名称-->
 <div class="navbar-header">
 <a class="navbar_title" href="#" >项目名称</a>
 </div>
 <!--导航栏用户登录信息-->
 <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">
 <!--左侧菜单栏-->
 <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">菜单一的内容</div>
 <div v-if="menu_index == 2">菜单二的内容</div>
 <div v-if="menu_index == 3">菜单三的内容</div>
 <div v-if="menu_index == 4">菜单四的内容</div>
 <div v-if="menu_index == 5">菜单五的内容</div>
 <div v-if="menu_index == 6">菜单六的内容</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>

效果图如下:

Vue实现导航栏菜单

学会这个之后,大家可以学习下vue的相关UI组件库,那样更简单,做出来的效果也更漂亮哟

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 #Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 #Javascript
You might like
Wordpress php 分页代码
2009/10/21 PHP
Views rows style模板重写代码
2011/05/16 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
python字典get()方法用法分析
2015/04/17 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
详解Python多线程
2016/11/14 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
详解Python文件修改的两种方式
2019/08/22 Python
python enumerate内置函数用法总结
2020/01/07 Python
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
中学生家长评语大全
2014/04/16 职场文书
服务宗旨标语
2014/07/01 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
青涩记忆观后感
2015/06/18 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript