Vue j는 하나의 요소에 여러 스타일 속성을 바인딩합니다.

Vue j는 하나의 요소에 여러 스타일 속성을 바인딩합니다.

이것에 의해, background-color 속성이 에 바인드 됩니다.<td>요소.

    <td :style="{backgroundColor: (props.item.release_date ? 'green' : 'transparent' ) }">
Some text
</td>

그러나 배경색뿐만 아니라 전경색(일반 색상 속성)도 동시에 바인딩하려면 어떻게 해야 합니까?

여러 스타일 특성을 요소에 바인딩하려면 어떻게 해야 합니까?

일단 css에는 전경색이 없습니다.쉼표로 구분하여 여러 스타일을 사용할 수 있습니다.key: value다음과 같은 쌍:

:style="{
   backgroundColor: (props.item.release_date ? 'green' : 'transparent' ), 
   color: 'red', 
   width: '120px' 
 }"

저는 모든 스타일을 하나의 오브젝트에 담을 수 없는 상황이었기 때문에 vue에서 다음과 같은 스타일의 대체적인 바인딩을 발견했습니다.

vue 스타일 바인딩, 개체 구문

vue 스타일 바인딩, 어레이 구문

기본적으로 여러 스타일 객체를 가진 후 다음과 같은 스타일 속성에 배열로 전달할 수 있습니다.

:style="[styleObjectOne, styleObjectTwo]"

언급URL : https://stackoverflow.com/questions/53626500/vue-js-bind-multiple-style-properties-to-an-element