클래스와 스타일 바인딩

클래스와 스타일 바인딩

데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다. 이러한 이유로, Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다.

HTML 클래스 바인딩하기

객체구문

클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다.

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

위 구문은 active 클래스의 존재 여부가 데이터 속성 isActive 의 참 속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한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>

isActive 또는 hasError 가 변경되면 클래스 목록도 그에 따라 업데이트됩니다. 예를 들어, hasError 가 true 가 되면 클래스 목록은 “static active text-danger” 가됩니다.

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

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

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

같은 결과로 렌더링 됩니다. 또한 객체를 반환하는 계산된 속성에도 바인딩 할 수 있습니다. 이것은 일반적이며 강력한 패턴입니다.

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

data: {
  isActive: true,
  error: null
},
computed: { //computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다.
  classObject: function () {
    return {
      active: this.isActive && !this.error, //active : true && true(!null ==true) -> active : true
      'text-danger': this.error && this.error.type === 'fatal' //text-danger : null(=false)
    }
  }
}

배열 구문

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

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

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

아래와 같이 렌더링 됩니다:

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

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

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

 data: {
          isActive: true,
          activeClass: "active",
          errorClass: "text-danger"
        }

이것은 항상 errorClass를 적용하고 isActive가 true일 때만 activeClass를 적용합니다.

그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있습니다. 그래서 배열 구문 내에서 객체 구문을 사용할 수 있습니다.

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

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

사용자 정의 컴포넌트로 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은 다음과 같습니다:

Hi

인라인 스타일 바인딩

객체 구문

v-bind:style 객체 구문은 매우 직설적입니다. 거의 CSS 처럼 보이지만 JavaScript 객체입니다. 속성 이름에 camelCase와 kebab-case (따옴표를 함께 사용해야 합니다)를 사용할 수 있습니다.

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

data: {
  activeColor: 'red',
  fontSize: 30
}

스타일 객체에 직접 바인딩 하여 템플릿이 더 간결하도록 만드는 것이 좋습니다.

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

다시, 객체 구문은 종종 객체를 반환하는 계산된 속성과 함께 사용합니다.