Vue 클래스와 스타일 바인딩

Vue 엘리먼트에 스타일 적용하기

데이터 바인딩은 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 자주 사용되는데, 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. v-bind의 표현식으로 최종 문자열을 계산하지만, 문자열 연결에 직접 간섭하는 것은 오류가 발생하기 쉽기 때문에 Vue는 v-bind와 함께 classstyle을 사용할 수 있는 기능을 제공합니다.

class 바인딩

객체 구문

표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있는데, Vue는 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다.

class 바인딩하기
<div v-bind:class="{ active: isActive }"></div>

위 코드는 active 클래스가 데이터 속성인 isActiveboolean 속성에 의해 결정된다는 것을 뜻하는데, 객체에 필드가 여러개 있는 경우에는 여러 클래스를 함께 토글 할 수 있습니다. 또 v-bind:class는 일반적인 class 속성과도 함께 사용할 수 있습니다.

클래스 바인딩과 클래스 속성 함께 사용하기
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
클래스 바인딩 데이터 샘플
data: {
  isActive: true,
  hasError: false
}

위의 코드와 데이터로 렌더링을 하면 다음과 같이 false 속성인 text-danger 문자열을 제외한 static, active 클래스를 가지는 엘리먼트가 생성되는 것을 확인할 수 있습니다.

렌더링 된 HTML 엘리먼트
<div class="static active"></div>

바인딩 데이터에서 isActive 또는 hasError가 변경되면 클래스 목록도 업데이트되는데, 만약 hasErrortrue가 되면 엘리먼트의 클래스 목록은 "static active text-danger"가 됩니다.

v-bind:class에 바인딩하는 객체는 꼭 인라인으로 작성할 필요는 없습니다. 다음과 같이 데이터에서 객체를 직접 바인딩해도 같은 엘리먼트가 생성되는 것을 확인할 수 있습니다.

클래스에 객체 바인딩하기
<div v-bind:class="classObject"></div>
객체 데이터 샘플
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

또한 객체를 반환하는 computed 속성에도 바인딩 할 수 있는데, 이것은 일반적이지만 강력한 패턴입니다.

computed 속성에 바인딩하기
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

배열 구문

v-bind:class에는 다음과 같이 객체 뿐만 아니라 배열도 전달할 수 있습니다.

v-bind에 배열 전달하기
<div v-bind:class="[activeClass, errorClass]"></div>

답글 남기기