Vue Toggle ermöglicht einen Klick zum Wechseln der Klassen (Erklärung mit Beispielen)

Jetzt werde ich Ihnen ein Beispiel für die Verwendung von Vue Toggle zum Wechseln der Klassen durch Klicken zeigen. Hat einen sehr guten Referenzwert. Ich hoffe, es hilft allen.

Das Beispiel ist wie folgt:

<template>
  <p>
    <span :class="{&#39;bg-primary text-danger&#39;:isA,&#39;bg-success text-white&#39;:!isA}" @click="toggle()">AAAAA</span>
  </p>
</template>
<script>
  export default {
    name: &#39;hello&#39;,
    data () {
      return {
        isA: false
      }
    },
    methods:{
      toggle:function () {
        this.isA=!this.isA
      }
    }
  }
</script>
<style scoped>
  @import "../../../src/assets/plugin/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css";
</style>

Das Obige ist das, wofür ich zusammengestellt habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Vue-Methode, um die Bildlaufleiste des Div nach jedem Rendern der Seite unten zu belassen

Implementieren Sie in Vue zuerst das Anfordern von Daten und dann das Rendern der Dom-Freigabe

Lösen Sie das Problem, dass der DOM-Betrieb der Vue-Seite nicht wirksam wird

Das obige ist der detaillierte Inhalt vonVue Toggle ermöglicht einen Klick zum Wechseln der Klassen (Erklärung mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!