vue的tab页面切换,vue tabbar 页面切换
本文主要介绍了vue的两种选择和一个标签栏切换的新方法的实现。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
问题描述
在我们的项目过程中，有时我们要做一些标签栏切换效果。有两个选项卡、三个选项卡，甚至五个、六个、七个或八个选项卡。平时我们只是直接用饿tab组件，偶尔闲着没事干，可以写两个tab切换效果，就是从一个中选一个效果。废话少说，上动态效果图。
这个案例适合两个tab(三个tab可以像我这样写，如果四五个tab饿了，组件会更快)
代码如下
HTML部分
模板
div id=应用程序
div class=tabWrap
！-这个结构是选项卡导航，对应的点击事件绑定到它。在click事件的回调中。
控制相应内容的显示、隐藏和样式修改，即tab-的切换
div class=tabNav
div class= navOne @ click= tabOne tab 1/div
div class= nav two @ click= tab two tab 2/div
/div
！-此结构是选项卡导航对应的内容-
div class=tabContent
！-通过v-show控件隐藏，隐藏一个同时显示一个，实现标签栏的切换效果-
我正在切换1/div。
我是tab2/div
/div
/div
/div
/模板
Js零件
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
ShowTabOne: true，//选择一个选项卡进行切换
ShowTwo: false，//选择一个选项卡进行切换
};
},
方法：{
//选择一个选项卡栏进行切换
tabOne() {
/*
点击tab1时，让tab1显示，tab2隐藏，即showTabOne为真，showTabTwo为假。
同时修改tab1的样式使其‘高亮’，注意不要忘记修改tab2的样式使其‘不高亮’。
当您单击tab2时，情况也是如此。
*/
this.showTabOne=true
this.showTabTwo=false
document.querySelector(。navOne ). style . background color= # fff ；
document.querySelector(。nav two ). style . background color= # e3e3e 3 ；
document.querySelector(。navOne ). style . color= # 3985 EC ；
document.querySelector(。nav two ). style . color= # 80868d ；
},
//选择一个选项卡栏进行切换
tabTwo() {
this.showTabTwo=true
this.showTabOne=false
document.querySelector(。navOne ). style . background color= # e3e3e 3 ；
document.querySelector(。nav two ). style . background color= # fff ；
document.querySelector(。nav two ). style . color= # 3985 EC ；
document.querySelector(。navOne ). style . color= # 80868d ；
},
},
};
/脚本
Css部分
style lang=less 。tabNav {
宽度：126px
高度：30px
边框-半径：2px
背景色：# e3e3e3
显示器：flex
对齐-项目：居中；
对齐-内容：空间-均匀；navOne {
宽度：60px
高度：26px
边框-半径：2px
背景色：# fff
颜色：# 3985ec
字体大小：14px
字体粗细：500；
显示器：flex
justify-content:居中；
对齐-项目：居中；
光标：指针；
}。navTwo
宽度：60px
高度：26px
颜色：# 80868d
边框-半径：2px
字体大小：14px
字体粗细：500；
显示器：flex
justify-content:居中；
对齐-项目：居中；
光标：指针；
}
}。tabContent {
边距-顶部：8px。navOneBox {
背景色：# bfa
}。navTwoBox {
背景色：# baf
}
}
/风格
以上就是本文关于切换vue标签栏的新方法的实现。更多相关vue标签栏切换内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。