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>
où 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
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