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 用原型继承来实现对象系统
Mar 22 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
浅谈从React渲染流程分析Diff算法
Sep 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
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php中this关键字用法分析
2016/12/07 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
简单学习vue指令directive
2016/11/03 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python创建数字列表的示例
2019/11/28 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
JSF界面控制层技术
2013/06/17 面试题
会议主持词
2014/03/17 职场文书
亲属关系公证书
2014/04/08 职场文书
五水共治一句话承诺
2014/05/30 职场文书
小学社团活动总结
2014/06/27 职场文书
个人收入证明范本
2014/09/18 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
详解python字符串驻留技术
2021/05/21 Python