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多种数据类型表格排序代码分析
Sep 11 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
Position属性之relative用法
Dec 14 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
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 木马攻击防御技巧
2009/06/13 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
PyTorch安装与基本使用详解
2020/08/31 Python
python处理写入数据代码讲解
2020/10/22 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
大学生就业自我鉴定
2013/10/26 职场文书
大学生党员承诺书
2014/05/20 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书