刚坐在车里就开始电闪雷鸣。听着隆隆的雷声，没有恐慌，到有几分振奋人心的舒心感、酣畅淋漓感。朝外望去，突然间，狂风夹杂着骤雨席卷而来，一泻千里。瞬间暴雨如注，打在地上，溅起朵朵浪花，在热浪的蒸腾下激起层层水雾。满大街是慌乱的人群，行人跑着、叫喊着，唧唧喳喳的赶着在房檐下躲雨。这时候伞是没有用的，挡不住狂风暴雨的袭击，无论是带了伞的，还是没带伞的，全都躲在了房檐下。
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换
先看展示结果：
点击第一个按钮，显示内容1 点击第二个按钮，展示内容2
下面上源码：注意哦，一定要代码规划，别学我(⊙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实战好代码教程》
本文vue如何实现顶部菜单栏到此结束。怀揣着朝气蓬勃的心迎接每一个黎明与黄昏小编再次感谢大家对我们的支持！
