TIL-66, (Vue) 조건부 Class

공통 주의점 ⇒ 클래스명과 조건은 반드시 작은따옴표(’ ’)

조건부로 Class명 정하기

:class="{'클래스명' : '조건'}"

<template>
  <div :class="{'myClass' : true}">true이면 class를 myClass로</div>
</template>

복수 조건부로 Class명 정하기

:class="{'클래스명' : '조건', '클래스명' : '조건'}"

<template>
  <div :class="{'myClass' : true, 'none' : false}">true이면 class를 myClass로,
  false면 class를 none으로
  </div>
</template>

if, else로 Class명 정하기

:class="[조건 ? 'true일 경우의 class명' : 'false일 경우의 class명']"

삼항연산자와 같다. 단지, 위에서 알아본 조건들은 대괄호가 아닌 중괄호였지만,

해당 조건은 대괄호이다.