Condition in v-bind:Style - VueJS

Question

I have an easy question for which I hope you could help:

Answer 1

Use condition in V-bind:style VueJS:

v-bind:style= "[condition ? {styleA} : {styleB}]"

Here is the minimal example,

If you need Parent-Child-Conditions, then this is the magic:

v-bind:style= "[condition_1 ? condition_2 ? {styleA} : {styleB} : {styleC}]"

In short of:

if (condition_1) {
   if (condition_2) {
      return styleA
   } else {
      return styleB
   }
} else {
  return styleC
}

Hope it helps!