Vue.js: Bedingte Klassenstilbindung

75

Ich habe einige Daten, auf die zugegriffen werden kann über:

{{ content['term_goes_here'] }}

... und dies entweder trueoder bewertet false. Ich möchte eine Klasse hinzufügen, die von der Wahrhaftigkeit des Ausdrucks abhängt:

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

wo truegibt mir die Klasse fa-checkbox-markedund falsch würde mir geben fa-checkbox-blank-outline. Die Art und Weise, wie ich es oben geschrieben habe, gibt mir einen Fehler:

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

Wie soll ich es schreiben, um die Klasse bedingt bestimmen zu können?

— Jeremy Thomas
quelle

1

Sie können auch so etwas wie <button :class="disabled && 'disabled'">eine Abkürzung tun <button :class="disabled ? 'disabled' : false">.

— Xpuu

114

Verwenden Sie die Objektsyntax .

v-bind:class="{'fa-checkbox-marked': content['cravings'],  'fa-checkbox-blank-outline': !content['cravings']}"

Wenn das Objekt komplizierter wird, extrahieren Sie es in eine Methode.

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            'fa-checkbox-marked': this.content['cravings'],  
            'fa-checkbox-blank-outline': !this.content['cravings']}
    }
}

Schließlich können Sie diese Funktion für jede solche Content-Eigenschaft verwenden.

v-bind:class="getClass('cravings')"

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}

— Bert
quelle

2

Ich überarbeitete zu:<i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>

— Jeremy Thomas

1

@JeremyThomas Ich würde entweder mit der Array-Syntax oder der Objekt-Syntax gehen, aber wahrscheinlich nicht mit beiden.

— Bert

Ja, ich war ein wenig überrascht, diese gemischte Syntax in ihren Dokumenten zu sehen. kein Fan.

— Dave

Wie können Sie die Klassenbindung zum Aktualisieren auslösen, wenn die überwachten Eigenschaften wie eine vue-routerÄnderung von einer externen Quelle stammen ? (Beispiel: an this.$router.push('/homepage')anderer Stelle in einer anderen Komponente genannt)

— Bigp

@bigp Ich gehe davon aus, dass Sie $routeauf Änderungen achten und Ihre Klassen nach Bedarf ändern können. router.vuejs.org/en/api/route-object.html

— Bert

39

<i class="fa" v-bind:class="cravings"></i>

und addieren berechnet:

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}

— Happyriri
quelle

3

Ich müsste zu viele Methoden haben, da es ungefähr 20 verschiedene Begriffe gibt

— Jeremy Thomas

4

Stimmen Sie für berechnet ab, es ist viel sauberer als Ausdrücke in den HTML-Tags.

— Johncl

27

Übergeben Sie ein Objekt an v-bind: class, um die Klasse dynamisch umzuschalten:

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

Dies wird in den Vue-Dokumenten empfohlen .

— kaleazy
quelle

8

Das Problem ist Klinge, versuchen Sie dies

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

— Julio Cesar Montenegro
quelle

3

wenn Sie separate CSS - Klassen für gleiches Element mit den Bedingungen in anwenden mögen Vue.js können Sie in meinem Szenario verwenden arbeiten die unten angegebene method.it.

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

Hier sind Main und Sub zwei verschiedene Klassennamen für dasselbe div-Element. v-bind: Klassenanweisung wird verwendet, um die Unterklasse hier zu binden. page ist die Eigenschaft, mit der wir die Klassen aktualisieren, wenn sich ihr Wert ändert.

js

data:{
page : true;
}

Hier können wir bei Bedarf eine Bedingung anwenden. so, wenn die Seite Eigenschaft true Element wird mit gehen Haupt und Sub claases CSS - Stilen. aber wenn er falsch ist nur Hauptklasse CSS - Stile werden angewendet.

— Sunali Bandara
quelle