Vue.js implementiert Erläuterungen zum Tab-Umschalten und Farbwechseln

<Vorlage>
<div >
     //Teil der Schaltfläche zum Wechseln der Registerkartenseite <ul>
        <li v-for="(item,index) in navList" :Klasse = "{active:!(index- 
            MenüIndex)}" @click = 'MenüAnzeigen(Index)'>
          <a href="#" rel="externes nofollow" >{{item}}</a>
        </li>
      </ul>
 
   //Inhaltstext <div v-show = 'menuIndex == 0'> Inhalt 1 <!-- Dies kann durch eine Unterkomponente ersetzt werden--></div>
   <div v-show = 'menuIndex == 1'>Inhalt 2<!--Sie können es hier durch eine Unterkomponente ersetzen--></div>
</div>
</Vorlage>
 
<Skripttyp="text/javascript">
Standard exportieren {
Daten(){
      zurückkehren {
         MenüIndex:0,
        navList:['Middleware-Details', 'Bereitstellungsarchitektur'],
      }
            }
   Methoden: {
      MenüAnzeigen (Index) {
        this.menuIndex = Index
        Konsole.log(dieser.MenüIndex)
      }
}
</Skript>
//Stil <Stilbereich>
//Klicken, um die Farbe zu ändern, ich habe sie auf blue.active{ eingestellt.
    Hintergrundfarbe: rgba(13, 175, 255, 0,33);
    }
<Stil>

.aktiv{
//Hintergrundfarbe background-color: rgba(13, 175, 255, 0.33);
//Schriftfarbe: rot;
  }