[스터디] Vue style, class binding

Vue에서 구현하는 Class와 Style binding 기본적인 사용예제 공홈에서 가져와 정리함.

v-bind:를 이용하여 Vue instance에서 정의한 데이터 값을 이용해 class와 style을 적용할 수 있다.

1. class

1-1)예시

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: { isActive: true, hasError: false }

=> Result Render는 다음과 같다.

<div class="static active"></div>

1-2) 다음과 같이 object 자체 적용도 가능

<div v-bind:class="classObject"></div>

data: { classObject: { active: true, 'text-danger': false } }

1-3) 배열형태로 적용도 가능

<div v-bind:class="[activeClass, errorClass]"></div>

data: { activeClass: 'active', errorClass: 'text-danger' }

=> Result Render는 다음과 같다.

<div class="active text-danger"></div>

2. style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

style sheet도 마찬가지로 객체, 배열구문으로 적용이 가능하다

공홈 참고 : https://vuejs.org/v2/guide/class-and-style.html

기타 예제 활용 참고 : https://www.vuemastery.com/courses/intro-to-vue-js/class-&-style-binding