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?

javascript vue.js vuejs2 conditional-formatting 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

Antworten:

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