Question

我有一个简单的问题，希望你能提供帮助：

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

如果来自API的URL未定义

，我希望样式属性“background”返回颜色

示例：

如果item.featured_photo不为null：

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

如果item.featured_photo为null：

<figure style="background: #FFF">

Answer 1

最后我找到了它！

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

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

==＆GT;

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

希望它有所帮助！

Answer 2

以前的参考文献非常好，但是对我来说真正起作用的是：

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

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

致谢！

Answer 3

为此使用计算属性：

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

Answer 4

如果要遍历对象，则可以使用方法。在这种情况下，当样式取决于对象中的属性时，这是我发现的唯一选项..以上所有选项均无效。

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

Answer 5

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

Answer 6

在类星体框架中

img{
  object-fit: cover;
}

Answer 7

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

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

它不起作用，您可以使用 backgroundColor

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

Answer 8

这对我有用

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

Answer 9

如果您不仅想使用布尔条件，还想使用数字或任何其他方式。这对我有用。

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

（只需使用 `` 而不是 '' 包裹 translate()

v-bind中的条件：样式 - VueJS

9 个答案: