vue二选一tab栏切换新做法实现

在我们做项目的过程中，有时候会要做一些tab栏切换效果。有两个tab的，有三个tab的，甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了，但是偶尔自己闲着没事，自己写个两个tab切换效果的，即二选一效果。闲话少说，上动态效果图

本案例适合两个tab的（三个tab的可以仿照我的写，如果是四五个tab用饿了么组件会更快些）

HTML部分

js部分

css部分

.tabNav {
 width: 126px;
 height: 30px;
 border-radius: 2px;
 background-color: #e3e3e3;
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 .navOne {
  width: 60px;
  height: 26px;
  border-radius: 2px;
  background-color: #fff;
  color: #3985ec;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
 }
 .navTwo {
  width: 60px;
  height: 26px;
  color: #80868d;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
 }
}
.tabContent {
 margin-top: 8px;
 .navoneBox {
  background-color: #bfa;
 }
 .navTwoBox {
  background-color: #baf;
 }
}

到此这篇关于vue二选一tab栏切换新做法实现的文章就介绍到这了,更多相关vue tab栏切换内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！