본문 바로가기

카테고리 없음

vue 클래스와 스타일 바인딩

 

<span v-bind:class="{fail: !item.execution}">
{{ item.execution === true ? '성공' : item.execution === false ? '실패' : '' }}
</span>
<!-- item 객체의 execution 프로퍼티에 falsy한 값이 오면 true가 반환되어 fail이라는 class를 span태그에 바인딩한다.-->

<span v-if="item.execution === true"> [작성 코드가 오류없이 실행 되었다는 의미로, 문제의 정답은 아닐 수 있습니다.]</span>

https://kr.vuejs.org/v2/guide/class-and-style.html