Vue js Conditional class style binding

Question

I have some data that is accessible via      content  term goes here            and this evaluated to either true or false   I d like to add a class depending on the truthiness of the expression like so    lt i class  fa  v-bind class     content  cravings        fa-checkbox-marked     fa-checkbox-blank-outline    gt  lt  i gt    where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline   The way I wrote it above gives me an error   - invalid expression  v-bind class     content  cravings        fa-checkbox-marked     fa-checkbox-blank-outline      How should I write it to be able to conditionally determine the class

User · Answer

the problem is blade  try this    lt i class  fa  v-bind class      content  cravings         fa-checkbox-marked     fa-checkbox-blank-outline    gt  lt  i gt

User · Answer

Use the object syntax   v-bind class    fa-checkbox-marked   content  cravings      fa-checkbox-blank-outline    content  cravings       When the object gets more complicated  extract it into a method   v-bind class  getClass     methods       getClass            return                fa-checkbox-marked   this content  cravings                   fa-checkbox-blank-outline    this content  cravings              Finally  you could make this work for any content property like this   v-bind class  getClass  cravings     methods     getClass property       return          fa-checkbox-marked   this content property          fa-checkbox-blank-outline    this content property

User · Answer

lt i class  fa  v-bind class  cravings  gt  lt  i gt    and add in computed    computed        cravings  function              return this content  cravings      fa-checkbox-marked     fa-checkbox-blank-outline

User · Answer

if you want to apply separate css classes for same element with conditions in Vue js you can use the below given method it worked in my scenario   html    lt div class  Main  v-bind class    Sub  page     gt    in here  Main and Sub are two different class names for same div element  v-bind class directive is used to bind the sub class in here  page is the property we use to update the classes when it s value changed   js  data   page   true      here we can apply a condition if we needed  so  if the page property becomes true element will go with Main and Sub claases css styles  but if false only Main class css styles will be applied

User · Answer

Why not pass an object to v-bind class to dynamically toggle the class    lt div v-bind class    disabled  order cancelled at    gt  lt  div gt    This is what is recommended by the Vue docs

[javascript] Vue.js: Conditional class style binding

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to conditional-formatting