[Vue.js] HTML 요소의 클래스(class)를 동적으로 바인딩하기

css를 하다보면 하나의 HTML요소에 상황에 따라 다른 스타일을 적용해 주어야 할 때가 있다.

예를 들면 클릭 된 탭이 A냐 B냐에 따라 색상을 변경해 준다든가, 높이를 다르게 설정한다든가 하는 경우이다.

 

 

:class 디렉티브

 

이런경우에는 :class 디렉티브를 사용해주면 된다. :class 디렉티브는 HTML요소의 클래스를 동적으로 바인딩하는데 사용된다. 

 

<div :class="this.tabs === 'template' ? 'aTemplateClass' : 'bTemplateClass'">
</div>

 

삼항연산자를 이용하여 tabs가 template인 경우에는 aTemplateClass 클래스가, tabs가 template이 아닌 경우에는 bTemplateClass 클래스가 적용되게 해준다.

그 후에는 <style></style>태그에 원하는 스타일을 지정해주면 된다.

 

<style lang="sass">
  .aTemplateClass
    background: #fff
  .bTemplateClass
    background: #000
</style>

 

사용자가 화면에서 탭을 클릭하면 tabs의 데이터가 변경됨에 따라 클래스를 동적으로 바인딩 할 수 있다.