Vue.js class, style binding

🌲Class Binding

객체 구문, 배열 구문

 

 

class에 데이터를 속성으로 사용할 때 v-bind 디렉티브를 추가한다. v-bind의 약어로 :만 사용하여 결과적으로 

<h1 :class="데이터"> 클래스 바인딩 </h1>

객체 형식에 여러 클래스(active, text-danger)를 추가해서 특정 데이터(isActive, haserror)를 연결할 수도 있다.

<h1 :class="{ active: isActive, 'text-danger' : hasError }"> 클래스 바인딩 </h1>

직접적으로 객체 데이터로 사용하지 않아도 되며, 이때는 data에 선언(classObject)한다.

<h1 :class="classObject"> 클래스 바인딩 </h1>

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

클래스 데이터는 computed 속성에 바인딩 할 수도 있다.

 

 

 

🌲Style Binding

아래와 같은 표현보다는 styleObject를 만들어 직접 바인딩하는 것이 좋다. 

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

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

*font-size는 카멜케이스로 표현 혹은 따옴표를 사용한 케밥케이스로 표현

 

두 개 이상의 styleObject를 적용할 때는 [ 배열 ] 안에 쉼표로 구분한다.

<div :style="[baseStyles, overridingStyles]"></div>