Condition in v-bind:Style

Question

Use condition in V-bind:style VueJS:

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

Here is the minimal example,

<figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">

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
}