Vue.js: Conditionnel style de classe
J'ai des données qui est accessible via:
{{ content['term_goes_here'] }}
... et ce évalués soit à 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
me donne de la classe fa-checkbox-marked
et faux aurait de me donner 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 être en mesure de déterminer de façon conditionnelle de la classe?
OriginalL'auteur Jeremy Thomas | 2017-04-04
Vous devez vous connecter pour publier un commentaire.
Utiliser le l'objet de la syntaxe.
Lorsque l'objet devient de plus en plus compliqué, les extraire dans une méthode.
Enfin, vous pouvez faire ce travail pour tout le contenu de la propriété de ce genre.
<i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>
J'irais avec la syntaxe de tableau ou l'objet de la syntaxe, mais pas les deux probablement.
ouais, j'ai été un peu surpris de voir que le mélange de syntaxe dans leurs docs. pas fan.
Comment pouvez-vous déclencher la classe de liaison à jour lorsque l'regardé les propriétés sont à venir à partir d'une source externe, comme un
vue-router
changement? (ex:this.$router.push('/homepage')
appelé ailleurs dans un autre composant)J'attends de vous pourrait regarder
$route
les changements et modifier vos classes nécessaires. router.vuejs.org/en/api/route-object.htmlOriginalL'auteur Bert
et ajouter dans calculés :
Vote pour calculé, est beaucoup plus propre que d'avoir des expressions à l'intérieur de balises html.
OriginalL'auteur SLYcee
Pourquoi ne pas passer un objet à v-lier:classe de basculer dynamiquement la classe:
C'est ce qui est recommandé par le Vue docs.
OriginalL'auteur kaleazy