vue实现顶部菜单栏

vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换

先看展示结果：
点击第一个按钮，显示内容1 点击第二个按钮，展示内容2

下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙)

 <template>
<div>
 <div class="tab-content">
  <div class="tab-content1" @click="cur=1" :class="{active:cur==1}"><span>数据标注</span> </div>
  <div class="tab-content2" @click="cur=2" :class="{active:cur==2}">案件数</div>
 </div>
 <div class="tab">
 <div v-show="cur==1">
  <div>内容1</div>
 </div>
 <div v-show="cur==2">
  <div>内容2</div>
 </div>
 </div>
</div>
</template>

<script>

export default {
 data () {
  return{
   cur:1
  }
 },

methods:{

 }
}
</script>
<style scoped>
.tab-content .active{
 background-color: #194e84 !important;
 color: #fff;
}
.tab-content1{
 text-align: center;
 cursor: pointer;
 width: 150px;
 height: 30px;
 border: 1px solid #ccc;
}
.tab-content2{
 margin-top:-30px;
 text-align: center;
  cursor: pointer;
  margin-left:200px;
 width: 150px;
 height: 30px;
 border: 1px solid #ccc;
}
</style>

分割线-----一个简单的按钮切换就完成了，思路very简单，实现特别方便，也很好用哦
:class="{active:cur==1}" 是选中菜单时改变样式的代码哦

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

赞 (0)

相关推荐

  • Vue实现侧边菜单栏手风琴效果实例代码

    Vue实现侧边菜单栏手风琴效果实例代码

    效果图如下所示: <template> <div class="asideBox"> <aside> <ul class="asideMenu"> <li v-for="(item,index) in menuList"> <div class="oneMenu" @click="showToggle(item,index)"> <

  • 基于vue实现圆形菜单栏组件

    整个样式都是基于css3 得transform而实现得. 每个扇形角度为360/12=30deg,当然,你不想做圆形也可以,公式就是     扇形角度=你想绘制得角度/扇形个数 当你计算好每个扇形得角度时,需要将li元素倾斜,倾斜角度=90-扇形面积,我的这个倾斜角度就是90-30=60deg,然后使用css3 得skew() circle-panel-1 circle-panel-2 circle-panel-3 当每个扇形倾斜60deg之后,会在原来得位置上,要想每个扇形有规律得组合在一起,

  • 基于vue.js实现侧边菜单栏

    基于vue.js实现侧边菜单栏

    侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ

  • 通过vue刷新左侧菜单栏操作

    今天完成了手头任务就想着做点什么,刚好领导让我看看项目左侧菜单栏不刷新的问题,我也是刚刚接触vue,很多东西都还不是很熟练,这也是我的第一篇自己写的博客,感觉还是很兴奋的,我觉得写博客这个习惯要一直养成,不但总结了自己一天的工作所得,而且也是对自己的一种良好习惯的养成. 下面进入正题. 这个是我们html里面的超链接,而我们的点击事件的跳转就是通过这个超链接实现的. <el-menu-item index="3-1"><a href="#/commodity

  • Vue结合路由配置递归实现菜单栏功能

    前言 在日常开发中,项目中的菜单栏都是已经实现好了的.如果需要添加新的菜单,只需要在路由配置中新增一条路由,就可以实现菜单的添加. 相信大家和我一样,有时候会跃跃欲试自己去实现一个菜单栏.那今天我就将自己实现的菜单栏的整个思路和代码分享给大家. 本篇文章重在总结和分享菜单栏的一个递归实现方式,代码的优化.菜单权限等不在本篇文章范围之内,在文中的相关部分也会做一些提示,有个别不推荐的写法希望大家不要参考哦. 同时可能会存在一些细节的功能没有处理或者没有提及到,忘知晓. 最终的效果 本次实现的这个菜

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • vue2.0使用v-for循环制作多级嵌套菜单栏

    使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了. 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id

  • Vue-路由导航菜单栏的高亮设置方法

    如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式 以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,

  • vue如何实现自定义底部菜单栏

    vue如何实现自定义底部菜单栏

    最近vue不是特别火,自己想写一个vue 的底部菜单栏,然后试着开始写,起来还是听痛苦的,但是还是写出来,这个过程重查询了一些资料和看了一些视频. 1 写好界面 这是我写好的四个界面 2 在router.js重定义路由 在一级路由下面定义自己tabbr的子路由. routes: [ { path: '/', name: 'index', component:()=>import('./views/index'), //懒加载引入,路由 children:[ {path:'',redirect:'

  • vue实现顶部菜单栏

    vue实现顶部菜单栏,同一个页面两个菜单按钮之间的切换 先看展示结果: 点击第一个按钮,显示内容1 点击第二个按钮,展示内容2 下面上源码:注意哦,一定要代码规划,别学我(⊙o⊙) <template> <div> <div class="tab-content"> <div class="tab-content1" @click="cur=1" :class="{active:cur==1}&

  • vue顶部菜单栏实现小结

    vue顶部菜单栏实现小结

    参考: 使用element-ui的el-menu导航选中后刷新页面保持当前选中状态 效果图1: <!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" displ

  • vue回到顶部监听滚动事件详解

    本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)"&

  • vue+el-menu实现菜单栏无限多层级分类

    vue+el-menu实现菜单栏无限多层级分类

    本文实例为大家分享了vue+el-menu实现菜单栏无限多层级分类的具体代码,供大家参考,具体内容如下 思路:数据格式须为数组内部多层嵌套模式,利用递归渲染菜单栏数据实现菜单多层级分类. 1.模拟菜单数据,引入封装组件 <template>   <div class="container">     <el-container>       <el-header>Header</el-header>       <el-

  • vue实现右键菜单栏

    vue实现右键菜单栏

    本文实例为大家分享了vue实现右键菜单栏的具体代码,供大家参考,具体内容如下 vue实现右键菜单栏和原生js大同小异,都是需要明白两个点 1.contextmenu事件是鼠标的右键点击事件2.要阻止浏览器的默认右键事件 代码如下 // methods rightShow() {     let menu = this.$refs.msgRightMenu     this.isPersoncontextMenus = true     var evt = event || window.even

  • vue实现顶部左右滑动导航

    日常开发中经常用到导航这些东西,写篇文章记录下.该导航实现为点击末尾/起首位置,导航自动滑动出下一项的效果. 思路:判断当前点击项,相对与屏幕的位置,若点击的位置,满足可移动的限制,进行自动滑动处理. 实现如下: vue <template> <div class="debug-index-page"> <div class="tab-layout" id="scroller"> <ul v-for=&q

随机推荐