个人中心
gpt4 book ai didi

vue实现顶部菜单栏

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue实现顶部菜单栏由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

先看展示结果:

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

vue实现顶部菜单栏

vue实现顶部菜单栏

下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
< 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}" 是选中菜单时改变样式的代码哦 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/Sara0064/article/details/103183452   。

最后此篇关于vue实现顶部菜单栏的文章就讲到这里了,如果你想了解更多关于vue实现顶部菜单栏的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送
文章推荐： 从五大方面，盘点2021年中UI/UX设计趋势
文章推荐： 智能家居技术应用于家庭之外的3个地方
文章推荐： 苹果未来AR设备将允许用户目光输入和编辑文字内容
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com