javascript - v-bind 中的条件 :Style

Question

<div>
  <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }">
</div>

如果来自 API 的 URL 是 undefined，我希望样式属性 background 返回一种颜色

例子:

如果 item.featured_photo 不是 null:

<figure style="background: url('localhost:6969/image.img') center no-repeat">

如果 item.featured_photo 为空:

<figure style="background: #FFF">

Answer 1

在 V-bind:style VueJS 中使用条件:

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

这是最小的例子，

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

如果您需要Parent-Child-Conditions，那么这就是魔法:

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

简而言之:

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