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实现表格动态增加行并对新行添加事件
Jul 30 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
js实现tab栏切换效果
Aug 02 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python中对list去重的多种方法
2014/09/18 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python关闭windows进程的方法
2015/04/18 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
商得四方公司面试题(gid+)
2014/04/30 面试题
关于人生的感言
2014/01/17 职场文书
教师产假请假条
2014/04/10 职场文书
第二课堂活动总结
2014/05/07 职场文书
广播体操口号
2014/06/18 职场文书
开学典礼观后感
2015/06/15 职场文书
追悼会家属答谢词
2015/09/29 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Django rest framework如何自定义用户表
2021/06/09 Python