v-bind:Style 中的条件 [英] Condition in v-bind:Style

问题描述

我有一个简单的问题，希望您能帮忙解答:

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

如果来自 API 的 URL 未定义，我希望样式属性背景"返回颜色

示例:

如果 item.featured_photo 不为空:

如果 item.featured_photo 为空:

解决方案

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

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

这是最小的例子，

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

如果您需要父子条件，那么这就是魔法:

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

简而言之:

if (condition_1) {如果(条件_2){返回样式A} 别的 {返回样式B}} 别的 {返回样式C}

希望有帮助！

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

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

I want the style attribute 'background' to return color if the URL from API is undefined

Example:

If item.featured_photo is not null:

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

If item.featured_photo is null:

<figure style="background: #FFF">

解决方案

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!

这篇关于v-bind:Style 中的条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！