클래스 바인딩

 v-bind 디렉티브를 사용할 때 class와 style을 사용해 원하는 스타일링을 할 수 있다.

v-bind:class="클래스명"
v-bind:class="{ 클래스명: 조건 }"

위처럼 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다.

객체를 받은 경우에는 클래스명은 객체의 속성 키에, 해당 클래스가 적용되야 하는 조건이 속성 값으로 들어간다.

 

---

1. 객체 구문

1) v-bind 클래스 바인딩을 이용한 클래스 토글

• 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있다.
• 아래 구문은 active 클래스의 존재 여부가 데이터 속성 isActive의 참 속성에 의해 결정된다.

<div v-bind:class="{ active: isActive }"></div>

 

 

2) 여러 클래스 토글

• 여러 클래스를 토글하려면 아래 코드와 같이 객체에 필드를 추가하면 된다.
• v-bind:class 디렉티브는 일반 class속성과 공존할 수 있다.

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

 

data: {
  isActive: true,
  hasError: false
}

위 코드는 아래와 같이 렌더링 된다.

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

 

 

3)

바인딩 된 객체는 인라인일 필요는 없다.

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

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

 

 

4) computed속성 바인딩

객체를 반환하는 computed 속성에도 바인딩 할 수 있다. 

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

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

 

 

2. 배열 구문

1) 클래스 목록을 배열로 지정

배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.

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

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

아래와 같이 렌더링 된다.

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

 

 

2) 삼항 연산자를 이용한 클래스 토글

삼항 연산자를 이용하여 목록에 있는 클래스를 조건부 토글할 수 있다.

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

위와 같이 삼항연산자를 이용하여 클래스를 토글하면 항상 errorClass를 적용하고 isActive가 true일 때만 activeClass를 적용한다. 그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있다. 그래서 배열 구문 내에서 객체 구문을 사용하여 코드를 줄일 수 있다.

 

 

3) 배열 구문 내 객체 구문을 사용하여 클래스 토글

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

 

3. 컴포넌트와 함께 사용하는 방법

사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추가된다. 이 엘리먼트는 기존 클래스는 덮어쓰지 않는다.

예를 들어, 이 컴포넌트를 선언하는 경우에

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

 

<my-component class="baz boo"></my-component>

위 코드가 렌더링 된 HTML은 다음과 같다.

<p class="foo bar baz boo">Hi</p>

 

클래스 바인딩도 동일하다.

<my-component v-bind:class="{ active: isActive }"></my-component>

isActive가 참일 때 렌더링 된 HTML은 다음과 같다.

<p class="foo bar active">Hi</p>