Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue

<Vorlage>
 <div id="app">
  <div Klasse="tabWrap">
   <!-- Diese Struktur ist eine Tab-Navigation, an die das entsprechende Klick-Ereignis gebunden ist. Beim Rückruf des Klick-Ereignisses werden das Ein- und Ausblenden des entsprechenden Inhalts sowie die Änderung des Stils gesteuert, also das Umschalten der Tabs-->
   <div Klasse="tabNav">
    <div Klasse="navOne" @click="tabOne">Tab1</div>
    <div Klasse="navTwo" @click="tabTwo">tab2</div>
   </div>
   <!-- Diese Struktur ist der Inhalt, der der Tab-Navigation entspricht-->
   <div Klasse="tabContent">
    <!-- Verwenden Sie v-show, um das Ausblenden zu steuern. So können Sie gleichzeitig eines ausblenden und eines anzeigen, und der Effekt des Umschalteffekts der Registerkartenleiste wird erzielt-->
    <div class="navOneBox" v-show="showTabOne">Ich schalte 1</div>
    <div class="navTwoBox" v-show="showTabTwo">ich bin tab2</div>
   </div>
  </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
  zurückkehren {
   showTabOne: true, // Wählen Sie einen der beiden Tabs zum Wechseln aus. showTabTwo: false, // Wählen Sie einen der beiden Tabs zum Wechseln aus. };
 },
 Methoden: {
  //Wählen Sie einen der beiden Tab-Leistenschalter tabOne() {
   /*
    Wenn Sie auf Tab1 klicken, machen Sie Tab1 sichtbar und Tab2 ausgeblendet, d. h. showTabOne ist „true“ und showTabTwo ist „false“.
    Ändern Sie gleichzeitig den Stil von Registerkarte1, um sie „hervorgehoben“ anzuzeigen, und vergessen Sie nicht, den Stil von Registerkarte2 zu ändern, um sie „nicht hervorgehoben“ anzuzeigen.
    Das Gleiche gilt, wenn Sie auf Tab2 klicken.
   */
   dies.showTabOne = wahr;
   dies.showTabTwo = falsch;
   document.querySelector(".navOne").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navOne").style.color = "#3985EC";
   Dokument.querySelector(".navTwo").style.color = "#80868D";
  },
  //Wählen Sie eine der beiden Tab-Leisten zum Umschalten tabTwo() {
   dies.showTabTwo = wahr;
   dies.showTabOne = falsch;
   document.querySelector(".navOne").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navTwo").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.color = "#3985EC";
   Dokument.querySelector(".navOne").style.color = "#80868D";
  },
 },
};
</Skript>

<style lang="less">
.tabNav {
 Breite: 126px;
 Höhe: 30px;
 Rahmenradius: 2px;
 Hintergrundfarbe: #e3e3e3;
 Anzeige: Flex;
 Elemente ausrichten: zentrieren;
 Inhalt ausrichten: gleichmäßiger Abstand;
 .navOne {
  Breite: 60px;
  Höhe: 26px;
  Rahmenradius: 2px;
  Hintergrundfarbe: #fff;
  Farbe: #3985ec;
  Schriftgröße: 14px;
  Schriftstärke: 500;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Cursor: Zeiger;
 }
 .navZwei {
  Breite: 60px;
  Höhe: 26px;
  Farbe: #80868d;
  Rahmenradius: 2px;
  Schriftgröße: 14px;
  Schriftstärke: 500;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Cursor: Zeiger;
 }
}
.tabInhalt {
 Rand oben: 8px;
 .navOneBox {
  Hintergrundfarbe: #bfa;
 }
 .navTwoBox {
  Hintergrundfarbe: #baf;
 }
}
</Stil>