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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
给Function做的OOP扩展
May 07 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
原生js轮播特效
May 18 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue 中url 链接左边的小图标更改问题
Dec 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
PHP4中session登录页面的应用
2008/07/25 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
园林施工员岗位职责
2013/12/11 职场文书
家长对小学生的评语
2014/01/28 职场文书
预备党员转正考核材料
2014/06/03 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
爱心捐款活动总结
2015/05/09 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript