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

问题描述

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

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

代码如下

HTML部分

template>
     div id="app">
      div class="tabWrap">
       !-- 这个结构是tab导航，并给其绑定对应的点击事件，在点击事件的回调中   去控制对应内容的显示隐藏和样式的修改即：tab的切换-->
       div class="tabNav">
        div class="navOne" @click="tabOne">
    tab1/div>
        div class="navTwo" @click="taBTwo">
    tab2/div>
       /div>
       !-- 这个结构是tab导航对应的内容 -->
       div class="tabcontent">
        !-- 通过v-show控制隐藏，同一时刻隐藏一个显示一个，就实现了tab栏的切换效果了 -->
        div class="navOneBox" v-show="showTabOne">
    我是切换1/div>
        div class="navTwoBox" v-show="showTabTwo">
    i am tab2/div>
       /div>
      /div>
     /div>
    /template>
    

js部分

script>
export default {
 name: "app", data() {
  return {
   showTabOne: true, // 二选一tab切换   showTabTwo: false, // 二选一tab切换  }
    ;
 }
, methods: {
  // 二选一tab栏切换  tabOne() {
       /*    点击tab1的时候，让tab1显示，tab2隐藏，即showTabOne为true，showTabTwo为false    同时修改tab1的样式使其"高亮",注意不要忘了修改tab2的样式，使其"不高亮"。    点击tab2的时候，也是同理。   */   this.showTabOne = true;
       this.showTabTwo = false;
       document.querySelector(".navOne").style.backgroundColor = "#fff";
       document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3";
       document.querySelector(".navOne").style.color = "#3985EC";
       document.querySelector(".navTwo").style.color = "#80868D";
  }
,  // 二选一tab栏切换  tabTwo() {
       this.showTabTwo = true;
       this.showTabOne = false;
       document.querySelector(".navOne").style.backgroundColor = "#e3e3e3";
       document.querySelector(".navTwo").style.backgroundColor = "#fff";
       document.querySelector(".navTwo").style.color = "#3985EC";
       document.querySelector(".navOne").style.color = "#80868D";
  }
, }
,}
    ;
    /script>
    

css部分

style lang="less">
.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;
 }
}
    /style>
    

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

• vue实现tab栏点击高亮效果
• 基于Vue实现tab栏切换内容不断实时刷新数据功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！