vue class binding 여러개 하는 법

vue를 사용하다보면 아래와 같이 class 에 바인딩을 하여 CSS 를 준다거나 동작의 활성화등의 조건을 주는 경우가 있다.

<button :class="{'active': isActive}">test</button>

 

그리고 위와 같이 한가지의 클래스를 추가하는 것이 아닌

다양한 조건에 따라 클래스를 통해 기능을 활성화 시키거나 CSS 처리를 하고 싶을 때가 있는데 

이럴 때에는 간단하게 아래와 같이 각각의 조건을 [ ] 를 통해 한번 더 감싸주면 된다.

<button :class="[{'active': isActive}, {'hasBackground': hasBackground}]">test</button>

 

또는 더 간단하게 { } 사이에 콤마(,) 를 통해 연결하여도 동작한다.

<button :class="{'active': isActive, 'hasBackground': hasBackground}">test</button>