[Vue.js] 클래스와 스타일 바인딩

1. 클래스와 스타일 바인딩

데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다.

클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다.

Vue는 v-bind가 class와 style과 함게 사용될 때 특별한 개선사항을 제공합니다.

문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있습니다.

 

2. HTML 클래스 바인딩

객체 구문

:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다.

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

객체에 더 많은 필드를 포함하여, 여러 클래스를 전환할 수 있습니다.

또한, :class 지시문은 일반 class속성과 공존할 수도 있습니다. 따라서 다음과 같은 형식을 따르게 됩니다:

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

data() {
  return {
    isActive: true,
    hasError: false
  }
}

결과

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

 

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

<div :class="classObject"></div>

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

이렇게 해도 동일한 결과를 렌더링합니다. 객체를 반환하는 computed property에 바인딩 할 수도 있습니다. 

<div :class="classObject"></div>

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

배열 구문

배열을 :class에 전달하여 클래스 목록을 적용 할 수 있습니다.

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

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

결과

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

 

3. 인라인 스타일 바인딩하기

객체 구문

JavaScript 객체라는 점을 제외하면 CSS와 거의 비슷합니다.

CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥 케이스와 함께 따옴표 사용)를 사용할 수 있습니다.

 

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

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

템플릿을 더 깔끔하게 만들기 위해, 스타일 객체에 직접 바인딩하는 것이 좋습니다.

<div :style="styleObject"></div>

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

배열 구문

:style의 배열 구문을 사용하면, 동일한 요소에 여러 스타일 객체를 적용 할 수 있습니다.

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

자동 접두사

:style에서 vendor prefixes 가 필요한 CSS 속성 (예: transform)을 사용하면 Vue는 적용된 스타일에 적절한 접두사를 자동으로 감지하고 추가합니다.

다중 값

스타일 속성에 다중 값(접두사)의 배열을 제공할 수 있습니다.

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

이것은 브라우저가 지원하는 배열의 마지막 값만 렌더링합니다. 이 예에서는 접두사가 없는 버전의 flexbox를 지원하는 브라우저에 대해 display: flex를 렌더링합니다.