小程序请求进口在哪_vue完成顶部菜单栏

vue实现顶部菜单栏       这篇文章主要为大家详细介绍了vue实现顶部菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

 template 
 div 
 div 
 div @click="cur=1" : span 数据标注 /span /div 
 div @click="cur=2" : 案件数 /div 
 /div 
 div 
 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简单，实现特别方便，也很好用哦
: 是选中菜单时改变样式的代码哦

关于vue.js组件的教程，请大家点击专题进行学习。

更多vue学习教程请阅读专题

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