Состояние в V-Bind: Стиль - VueJS

Ответ 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'}]">

Если вам нужны родительские-детские условия, то это волшебство:

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

Для этого используйте вычисленное свойство:

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

Ответ 4

Ответ 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 }]

Ответ 5

Если вы перебираете объект, вы можете использовать метод. В тех случаях, когда стиль зависит от свойства объекта, это единственный вариант, который я нашел... ни один из указанных выше вариантов не работает.

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