Vue.js: Conditionnel style de classe

j'ai des données qui est accessible via:

{{ content['term_goes_here'] }}

... et cette évalué à true ou false. Je voudrais ajouter une classe en fonction du truthiness de l'expression comme suit:

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

true donne moi la classe fa-checkbox-marked et false me donnerait fa-checkbox-blank-outline. La façon dont je l'ai écrit ci-dessus me donne une erreur:

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

Comment dois-je l'écrire pour pouvoir conditionnellement déterminer la classe?

18
demandé sur Jeremy Thomas 2017-04-04 17:45:09

4 réponses

syntaxe de l'objet.

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

lorsque l'objet devient plus compliqué, extrayez-le dans une méthode.

v-bind:class="getClass()"

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

enfin, vous pouvez faire en sorte que cela fonctionne pour n'importe quelle propriété de contenu comme celle-ci.

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

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}
31
répondu Bert 2017-04-04 15:15:14
<i class="fa" v-bind:class="cravings"></i>

et ajouter dans calculés :

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}
5
répondu SLYcee 2017-04-04 14:48:23

le problème, c'est lame, essayez ce

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
4
répondu Julio Cesar Montenegro 2018-01-04 23:56:32

Pourquoi ne pas passer un objet à v-lier:classe dynamiquement bascule de la classe:

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

C'est ce qui est recommandé par l' Vue docs.

3
répondu kaleazy 2018-07-09 00:13:23