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 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
js实现延迟加载的方法
Jun 24 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
vue开发移动端底部导航条功能
Apr 08 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
星际原理概述
2020/03/04 星际争霸
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Django Celery异步任务队列的实现
2019/07/24 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
毕业自我鉴定
2013/11/05 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
质量工程师岗位职责
2013/11/16 职场文书
科研先进个人典型材料
2014/01/31 职场文书
2014年财政工作总结
2014/12/10 职场文书
学习十八大的感悟
2015/08/11 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python