v-bind 상태:스타일.

v-bind 상태:스타일.

간단한 질문이 하나 있는데 도움이 되었으면 합니다.

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

API의 URL이 정의되지 않은 경우 스타일 속성 'background'에서 색상을 반환하고 싶습니다.

예:

if 아이템.featured_photo는 null이 아닙니다.

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

if 아이템.featured_photo는 null입니다.

<figure style="background: #FFF">

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
}

도움이 됐으면 좋겠다!

이전의 레퍼런스는 매우 좋았습니다만, 실제로 효과가 있었던 것은, 다음과 같습니다.

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

매뉴얼: https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

안부 전해 주세요!

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

여기에는 계산된 속성을 사용합니다.

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

이것은 나에게 효과가 있었다.

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

개체를 통해 반복하는 경우 메서드를 사용할 수 있습니다.이러한 경우 스타일이 객체의 속성에 종속되어 있는 경우, 이 옵션만 찾을 수 있습니다. 위의 옵션은 모두 작동하지 않습니다.

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

배경색은 사용할 수 없는 것에 특히 주의를 기울여야 합니다.

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

backgroundColor를 사용할 수 없습니다.

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

부울 조건뿐만 아니라 숫자도 사용하고 싶은 경우.이건 나한테 효과가 있었어요.

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

퀘이사 프레임워크에서

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

언급URL : https://stackoverflow.com/questions/48455909/condition-in-v-bindstyle