VUE-頁面按鈕控制DIV展示(隱藏和顯示)和VUE.axios請求調用

頁面按鈕控制展示數據:
效果圖:
點擊已辦隊列對應的展示數據:

待辦按鈕展示數據效果圖:

VUE頁面代碼:

<template>
  <div class="WRAP">
    <div class="main">
       <div class="save_box">
        <el-button type="primary" @click="onclickDaiBanHoliday()" v-if="bind">待辦隊列{{flowAmongNumBer}}</el-button>
        <el-button type="primary" @click="onclickYiBanHoliday()">已辦隊列{{flowStopNum}}</el-button>
      </div>
    </div>
  </div>
</template>

script代碼:

<script>
import Stomp from 'stompjs'
export default {
  name: 'entry',
  data() {
    return {
      showTeacherDaiBanDiv:false,
      showTeacherYiBanDiv:false,
    };
  },
  methods: {
    getYiBanData(){
      this.$axios({
        url: "http://localhost:8088/teacher/queryTeacherHolidayYiBan",
        method: "post",
        data: { 
          flowAuditor: this.$route.query.userid,
           flowSatus: '0',
          }
       })
      .then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableYiBanData = res.data.data;
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
     onclickYiBanHoliday(){
        this.showTeacherYiBanDiv = true; 
        this.showTeacherDaiBanDiv = false; 
        this.getYiBanData();
    },
     onclickDaiBanHoliday(){
         this.showTeacherDaiBanDiv = true; 
         this.showTeacherYiBanDiv = false; 
    }
   
  },
};
</script>

代碼思路:
1.頁面利用@click按鈕，對應的數據展示要封裝一層DIV 然後利用VUE的v-show來進行操作
先初始化都不顯示，點擊按鈕觸發然後給上true(false是不展示)，然後把不要的數據展示給flase掉
2.數據展示控制做完之後就開始掉method方法進行請求.axios