Mehrere Möglichkeiten zur Verwendung der V-Bind-Bindung mit Klasse und Stil in Vue

<div id="app">
    <div Klasse="Schaltflächengruppe">
      <Schaltfläche
        v-for="(Tabulator, Index) in Tabulatoren" 
        v-bind:Schlüssel="Index" 
        v-bind:Klasse="{aktiv: aktuellerTab === Tab}" 
        v-on:click="aktuellerTab = Tab"
      >{{tab}}</button>
    </div>
    <Komponente v-bind:is="currentTabComponent"></Komponente>
</div>
<Skript>
Vue.component("tab1", {
    "Vorlage": "<p>Dies ist Registerkarte 1</p>"
});
Vue.component("tab2", {
  "Vorlage": "<p>Dies ist Registerkarte 2</p>"
});
Vue.component("tab3", {
  "Vorlage": "<p>Dies ist Registerkarte 3</p>"
});
var vm = neuer Vue({
  el: "#app",
  Daten: {
    currentTab: "tab1",
    Registerkarten: ["Registerkarte1", "Registerkarte2", "Registerkarte3"]
  },
  berechnet: {
    aktuelleTabKomponente() {
      gib dies.currentTab zurück;
    }
  }
});
</Skript>

<Schaltfläche 
    Klasse="btn"
    v-bind:class="{'btn-primary': istPrimär, aktiv: istAktiv}"
></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        isPrimary: wahr,
        istAktiv: wahr  
      }
    });
</Skript>

<button class="btn btn-primary aktiv"></button>

<button class="btn" v-bind:class="activePrimary"></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        aktivPrimär: {
          'btn-primary': wahr, 
          aktiv: wahr
        }
      }
    });
</Skript>

<button class="btn btn-primary aktiv"></button>

<button v-bind:class="activeClass"></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        istAktiv: wahr
      },
      berechnet: {
        aktiveKlasse() {
          zurückkehren {
            aktiv: this.isActive
          }
        }
      }
    });
</Skript>

<button class="btn" v-bind:class="[primary, aktiv]"></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        primär: 'btn-primary',
        aktiv: 'btn-aktiv'  
      }
    });
</Skript>

//Ternärer Ausdruck <button v-bind:class="[isActive ? active : '', primary]"></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        istAktiv: wahr,
        primär: 'btn-primary',
        aktiv: 'btn-aktiv'  
      }
    });
</Skript>
 
//Verwenden der Objektsyntax in einem Array <button v-bind:class="[{active: isActive}, primary]"></button>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        istAktiv: wahr,
        primär: „btn-primär“
      }
    });
</Skript>

<div v-bind:style="{color: colorStyle, backgroundColor: background}">
Objektsyntax
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        Farbstil: "rot",
        Hintergrund: „blau“
      }
    });
</Skript>

<div v-bind:style="style">Objektsyntax</div>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        Stil: {
          Farbe: 'rot',
          Hintergrundfarbe: „blau“
        }
      }
    });
</Skript>

<div v-bind:style="[style, fontStyle]">Objektsyntax</div>
<Skript>
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        Stil: {
          Farbe: 'rot',
          Hintergrundfarbe: „blau“
        },
        Schriftstil: {
          Schriftgröße: '18px'
        }
      }
    });
</Skript>