vue实现顶部菜单栏


Posted in Javascript onNovember 08, 2020

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

先看展示结果:

点击第一个按钮,显示内容1 点击第二个按钮,展示内容2

vue实现顶部菜单栏

vue实现顶部菜单栏

下面上源码:注意哦,一定要代码规划,别学我(⊙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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
Vue实现菜单切换功能
Nov 08 #Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 #Javascript
JS实现手风琴特效
Nov 08 #Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 #Javascript
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python语言的变量认识及操作方法
2018/02/11 Python
详解python中asyncio模块
2018/03/03 Python
python yield关键词案例测试
2019/10/15 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python飞机大战游戏实例讲解
2020/12/04 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
旅游网创业计划书
2014/01/31 职场文书
《自选商场》教学反思
2014/02/14 职场文书
出生公证委托书
2014/04/03 职场文书
如何写求职信
2014/05/24 职场文书
采购内勤岗位职责
2015/04/13 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python