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,

<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
}

Hope it helps!

Answer 2

this worked for me

<div :style="[ myboolean ? { backgroundImage: `url(${group.backgroundImage.sourceUrl})` } : null ]">