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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <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 的底部菜单栏,然后试着开始写,起来还是听痛苦的,但是还是写出来,这个过程重查询了一些资料和看了一些视频. 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顶部菜单栏实现小结
参考: 使用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实现菜单栏无限多层级分类的具体代码,供大家参考,具体内容如下 思路:数据格式须为数组内部多层嵌套模式,利用递归渲染菜单栏数据实现菜单多层级分类. 1.模拟菜单数据,引入封装组件 <template> <div class="container"> <el-container> <el-header>Header</el-header> <el-
-
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
随机推荐
- PowerShell检查网卡状态和对应的电源设置
- MySQL中复制数据表中的数据到新表中的操作教程
- 基于jQuery实现的菜单切换效果
- 批处理bat删除指定天数日期之前的文件
- java中重写equals()方法的同时要重写hashcode()方法(详解)
- 详解Java中Hibernate的基本原理
- iOS沙盒视频缩略图及保存本地代码
- firefox下javascript实现高亮关键词的方法
- 浅谈JavaScript 执行环境、作用域及垃圾回收
- 关于ASP.NET中TreeView用法的一个小例子
- 详解python调度框架APScheduler使用
- php中类和对象:静态属性、静态方法
- C#实现的xml操作类完整实例
- Android实现横向二级菜单
- node-http-proxy修改响应结果实例代码
- javascript的渐进增强与平稳退化浅谈
- JAVA中STRING的常用方法小结
- Javascript中String的常用方法实例分析
- 如何使用C#操作幻灯片
- 浅谈vue中改elementUI默认样式引发的static与assets的区别