Vue two-choice tab bar switching new approach

<template>
 <div id="app">
  <div class="tabWrap">
   <!-- This structure is a tab navigation, and the corresponding click event is bound to it. In the callback of the click event, the display and hiding of the corresponding content and the modification of the style are controlled, that is, the switching of the tab-->
   <div class="tabNav">
    <div class="navOne" @click="tabOne">tab1</div>
    <div class="navTwo" @click="tabTwo">tab2</div>
   </div>
   <!-- This structure is the content corresponding to the tab navigation-->
   <div class="tabContent">
    <!-- Use v-show to control hiding, hiding one and showing one at the same time, and the tab bar switching effect is achieved-->
    <div class="navOneBox" v-show="showTabOne">I am switching 1</div>
    <div class="navTwoBox" v-show="showTabTwo">i am tab2</div>
   </div>
  </div>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   showTabOne: true, // Choose one of the two tabs to switch showTabTwo: false, // Choose one of the two tabs to switch };
 },
 methods: {
  //Choose one of the two tab bar switches tabOne() {
   /*
    When you click tab1, make tab1 visible and tab2 hidden, that is, showTabOne is true and showTabTwo is false
    At the same time, modify the style of tab1 to make it "highlighted", and be careful not to forget to modify the style of tab2 to make it "unhighlighted".
    The same applies when you click 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";
  },
  //Choose one of the two tab bar switching 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>

<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>