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 相关文章推荐
jquery插件validate验证的小例子
May 08 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
手机业务员岗位职责
2013/12/13 职场文书
校运会入场式解说词
2014/02/10 职场文书
40岁生日感言
2014/02/15 职场文书
罚站检讨书
2015/01/29 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
西安事变观后感
2015/06/12 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang