Vue实现导航栏菜单

本文实例为大家分享了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的相关UI组件库，那样更简单，做出来的效果也更漂亮哟

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现nav导航栏的方法

    vue实现nav导航栏的方法

    每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的.但是要写出代码量少,冗余度低的代码就要动脑子思考一下了. 最近写了一个百度地图的项目,要求底部有一个导航栏.具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种.灰色的代表未选中,选中的用带样色的图片替换. 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组.数组里边存放着{title:"银行",url:" ",url1:" &q

  • Vue.js 递归组件实现树形菜单（实例分享）

    Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本

  • vue2.0 elementUI制作面包屑导航栏

    Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • vue实现导航栏效果（选中状态刷新不消失）

    vue实现导航栏效果（选中状态刷新不消失）

    Vue导航栏 用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写.(全部代码黏贴到本文的最后面了) 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未

  • vue elementUI使用tabs与导航栏联动

    不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面.但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在slider.vue中点击路由后,把当前选择的路由@select使用bus传出去 <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color=

  • vue自定义底部导航栏Tabbar的实现代码

    如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <

  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

随机推荐