조건에 따른 분기 처리 모음집

Breeze·2021년 11월 17일
0

Frontend 개발 일지

목록 보기
5/8

안녕하세요 행복이님들. 혀누킴입니다! 우리 서비스는 정말 분기 처리가 많다는 사실을 알고 계셨나요? 프론트 전사 지미짐과 교저스를 위해 조건에 따라 분기 처리하는 방법들을 정리해보았습니다. 다들 유용한게 쓰시길 바랍니다😘

조건에 따라 다른 class 적용하기

:class="{ class명 : 조건 }"


<button :class="{ active: isActive }"></button>
<button :class="[{ active: isActive }, { deactive: isActive == false }"]></button>

삼항연산자 활용하여 조건에 따라 다른 style 적용하기

:style="[조건 ? {css 속성: css1} : {CSS 속성: css2}]"

:style="[isClicked ? {color:'#FFFFFF'} : {color:'#7B6F72'}]"

삼항연산자 활용하여 조건에 따라 다른 funtion 호출하기

isClicked가 true면 클릭했을 때 function1, function2를 실행하고, 아니면 클릭하더라도 아무것도 실행하지 마라.

<div v-on="isClicked ? {click:() => {function1();function2();}} : {click:() => {} }"></div>
profile
약속 관리 서비스 breeze의 개발 일지입니다.

0개의 댓글