Heim  >  Artikel  >  Web-Frontend  >  Vue Toggle ermöglicht einen Klick zum Wechseln der Klassen (Erklärung mit Beispielen)

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

亚连
亚连Original
2018-05-30 15:27:553320Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn