v-bind 中的条件：样式答案

【问题标题】：Condition in v-bind:Stylev-bind 中的条件：样式
【发布时间】：2018-07-05 11:19:04
【问题描述】：

我有一个简单的问题希望你能帮忙：

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

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

例子：

如果 item.featured_photo 不为空：

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

如果 item.featured_photo 为空：

<figure style="background: #FFF">

【问题讨论】：

标签： vue.js vuejs2

【解决方案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
}

希望对你有帮助！

【讨论】：

【解决方案2】：

以前的参考资料非常好，但对我来说真正有用的是：

<input type="text" 
v-bind:style=" boolVariable ? 'border: 1px solid orange;' : 'border: none;' ">

在文档中：https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

问候！

【讨论】：

【解决方案3】：

Feed Git 的答案是完美的，这是另一个具有多个属性的示例。只需用逗号分隔：

:style="[printing ? {'margin' : '0px 0px 20px 0px', 'min-height': '830px', 'box- shadow': 'none', 'border': 'none'} : {'margin': '0px 0px 20px 0px', 'min-height': '830px'}]

表格如下（对于像我这样的新手）：

:style="[boolVariable ? { true } : { false }]

【讨论】：

【解决方案4】：

为此使用计算属性：

<figure :style="'{ background: `${background}` }'">

...

data () {
    return {
        item: {
           featured_photo: null
        }
     }
},
computed: {
    background () {
        return !item.featured_photo ? '#fff' : `url(${item.featured_photo}) center no-repeat`
    }
},
methods: {
    setPhoto(val) {
         this.item.featured_photo = val
    }
}

编辑：

我在这里对你的 API 和路由做了很多假设。这是概括它的粗略尝试：

<figure :style="'{ background: `${getBackground('main_featured')}` }'">
<figure :style="'{ background: `${getBackground('featured_photo', 1)}` }'">
<figure :style="'{ background: `${getBackground('featured_photo', 2)}` }'">


...

methods: {
     async getBackground (type, index) {
          let r = await axios.get(`/images/${type}/${index}`).then(r => r.data.background)
          return r || '#fff'
     }
 }

【讨论】：

总之更短的兄弟！！
是的，你是如何进行 API 调用的？
我修好了。让我们在下面查看我的答案。总之非常感谢！！

【解决方案5】：

这对我有用

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

【讨论】：

【解决方案6】：

如果你正在迭代一个对象，你可以使用一个方法。在这种情况下，当样式依赖于对象中的属性时，这是我发现的唯一选项....上述选项均无效。

<div v-for="thing in things">
   <div :style="'{ background: `${background(thing)}` }'"></div>
</div>
...

data () {
    return {
        item: {
           featured_photo: null
        }
     }
},
methods: {
    background (thing) {
        return thing ? 'red' : 'black'`
    }
}

【讨论】：

【解决方案7】：

对于背景颜色，您必须特别注意 你不能使用

:style="[ isDark ? {background-color: 'black'}: {background-color: 'white'}]"

不行，你可以使用backgroundColor

:style="[ isDark ? {backgroundColor: 'black'}: {backgroundColor: 'white'}]"

【讨论】：

【解决方案8】：

如果您不仅想使用布尔条件，还想使用数字。这对我有用。

:style="{ transform: `translate(${x}vw)` }"

【讨论】：

【解决方案9】：

在类星体框架中

V-bind:style=" $q.screen.lt.md ? 'height:600px' : ''"

【讨论】：