多个Button实现tab顶部导航栏

定义多个Button按钮

<button :class="flag === 1?'active':'tab-button'" @click="tab1" id="tab1">标签1</button>
<button :class="flag === 2?'active':'tab-button'" @click="tab2" id="tab2">标签2</button>
<button :class="flag === 3?'active':'tab-button'" @click="tab3" id="tab3">标签3</button>
<button :class="flag === 4?'active':'tab-button'" @click="tab4" id="tab4">标签4</button>

定义每个按钮下的内容显示

<div class="div-content">
    <div v-show="flag===1">标签1</div>
    <div v-show="flag===2">标签2</div>
    <div v-show="flag===3">标签3</div>
    <div v-show="flag===4">标签4</div>
</div>

定义点击事件

methods: {
  tab1() {
    this.flag =1;
  },
  tab2() {
    this.flag =2;
  },
  tab3() {
    this.flag =3;
  },
  tab4() {
    this.flag =4;
  }
}

通过绑定动态的class样式来控制显示的样式，v-show可以控制哪个模块显示，在多个button排列的中，两个button之间会存在间隔，通过font-size可以清楚掉button之间的间隔

font-size: 0px; 

 

 完整代码：

<template>
  <div>
    <div class="div-main">
      <button :class="flag === 1?'active':'tab-button'" @click="tab1" id="tab1">标签1</button>
      <button :class="flag === 2?'active':'tab-button'" @click="tab2" id="tab2">标签2</button>
      <button :class="flag === 3?'active':'tab-button'" @click="tab3" id="tab3">标签3</button>
      <button :class="flag === 4?'active':'tab-button'" @click="tab4" id="tab4">标签4</button>
      <div class="div-content">
        <div v-show="flag===1">标签1</div>
        <div v-show="flag===2">标签2</div>
        <div v-show="flag===3">标签3</div>
        <div v-show="flag===4">标签4</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'tabBar',
    data() {
      return {
        flag: 1,
      };
    },
    methods: {
      tab1() {
        this.flag =1;
      },
      tab2() {
        this.flag =2;
      },
      tab3() {
        this.flag =3;
      },
      tab4() {
        this.flag =4;
      }
    }
  };
</script>

<style scoped>

  .div-main {
    margin-top: 10px;
    width: 400px;
    height: 200px;
    border: 1px solid #8c939d;
    background-color: #8c939d;
    /*父元素的font-size: 0可以去掉button之间的间隔*/
    font-size:0;
  }
  .div-content {
    width: 100%;
    height: calc(100% - 50px);
    background-color: #8c939d;
    font-size: 15px;
  }
  .tab-button {
    width: 100px;
    height: 50px;
    border: none;
    background-color: #fff;
  }
  .active {
    width: 100px;
    height: 50px;
    border: none;
    background-color: #409EFF;
  }
</style>