[Vue] class binding

어떠한 조건에 따라 서로 다른 html class를 적용시켜야 한다면, class binding을 사용해서 코드를 간소화 할 수 있다.

기존 코드

<div v-if="item.count > 0">
  <div class="red">
    <p> {{ count }} </p>
  </div>
</div>
<div v-if="item.count < 0">
  <div class="blue">
    <p> {{ count }} </p>
  </div>
</div>

위와 같이 두 <div>가 동일한 내용을 포함하고 있지만, class 만 상황에 따라 다르게 적용되어야할 때 class binding을 사용할 수 있다.

변경

<div :class="{'red': item.count > 0, 'blue' : item.coun < 0}">
  <p> {{ count }} </p>
</div>

이렇게 class binding을 적용한다면 변경전 코드보다 훨씬 간소화할 수 있다.