안녕하세요 행복이님들. 혀누킴입니다! 우리 서비스는 정말 분기 처리가 많다는 사실을 알고 계셨나요? 프론트 전사 지미짐과 교저스를 위해 조건에 따라 분기 처리하는 방법들을 정리해보았습니다. 다들 유용한게 쓰시길 바랍니다😘
:class="{ class명 : 조건 }"
<button :class="{ active: isActive }"></button>
<button :class="[{ active: isActive }, { deactive: isActive == false }"]></button>
:style="[조건 ? {css 속성: css1} : {CSS 속성: css2}]"
:style="[isClicked ? {color:'#FFFFFF'} : {color:'#7B6F72'}]"
isClicked가 true면 클릭했을 때 function1, function2를 실행하고, 아니면 클릭하더라도 아무것도 실행하지 마라.
<div v-on="isClicked ? {click:() => {function1();function2();}} : {click:() => {} }"></div>