介绍
如何使用vue才能实现顶部菜单栏功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
先看展示结果:
点击第一个按钮,显示内容1点击第二个按钮,展示内容2
下面上源码:注意哦,一定要代码规划,别学我(⊙o⊙)
& lt; template>
& lt; div>
& lt; div类=皌ab-content"祝辞
& lt; div类=皌ab-content1"@click=盎档?1,:类=皗活跃:坏蛋==1}“祝辞& lt; span>数据标注& lt;/span>& lt;/div>
& lt; div类=皌ab-content2"@click=盎档?2,:类=皗活跃:坏蛋==2}“祝辞案件数& lt;/div>
& lt;/div>
& lt; div类=皌ab"祝辞
& lt; div v-show=盎档?=1,比;
& lt; div>内容1 & lt;/div>
& lt;/div>
& lt; div v-show=盎档?=2,比;
& lt; div>内容2 & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
坏蛋:1
}
}，
方法:{
}
}
& lt;/script>
& lt; scoped>风格;
.tab-content .active {
background - color: # 194 e84 !重要;
颜色:# fff;
}
.tab-content1 {
text-align:中心;
光标:指针;
宽度:150 px;
高度:30 px;
边界:1 px固体# ccc;
}
.tab-content2 {
margin-top: -30 px;
text-align:中心;
光标:指针;
margin-left: 200 px;
宽度:150 px;
高度:30 px;
边界:1 px固体# ccc;
}
& lt;/style> 看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
