vue.js conditional inline style

vue.js 조건에 따른 인라인 스타일

vee-validate 를 사용하다가 에러가 났을 때 클래스로 스타일을 조정해주려고 했는데, 잘 되지 않았다. 조건에 따라 인라인 방식으로 넣으려고 했는데 어떻게 해야 하는 지 잘 몰랐다.

vue.js 공식문서에서는 조건에 따른 클래스를 넣는 방법은 잘 나와 있는데, 조건에 따라 인라인 스타일을 넣는 방법을 알 수가 없었다.
https://kr.vuejs.org/v2/guide/class-and-style.html

검색을 해보니 다행히 방법이 있었다.
https://stackoverflow.com/questions/48455909/condition-in-v-bindstyle

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

좋은 웹페이지 즐겨찾기