Vue.js : Liaison conditionnelle de style de classe

Question

J'ai des données qui sont accessibles via :

{{ content['term_goes_here'] }}

... et ceci évalué à soit true o false . J'aimerais ajouter une classe en fonction de la véracité 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 la classe fa-checkbox-marked et faux 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 déterminer conditionnellement la classe ?

Answer 1

Si vous voulez appliquer des classes css distinctes pour le même élément avec des conditions dans le fichier Vue.js vous pouvez utiliser la méthode ci-dessous. elle a fonctionné dans mon scénario.

html

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

ici, Principal y Sous sont deux noms de classe différents pour le même élément div. v-bind:class est utilisée pour lier la sous-classe ici. page est la propriété que nous utilisons pour mettre à jour les classes lorsque sa valeur a changé.

js

data:{
page : true;
}

ici nous pouvons appliquer une condition si nécessaire. ainsi, si la propriété de la page devient vraie, l'élément ira avec Principal y Sous clases css styles. mais si false seulement Principal Les styles css de la classe seront appliqués.