Vue Class와 Style Bindings

Class and Style Bindings

• 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 데이터 바인딩
• 이 두 속성은 v-bind를 사용하여 처리할 수 있음
• 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉬움
• Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공
• 표현식은 문자열 이외에 객체(Object) 또는 배열(Array)를 이용할 수 있음

Binding HTML Classes

• 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있음
• 배열을 v-bind:class에 전달하여 클래스 목록을 지정할 수 있음

사용법

객체

• active 클래스의 존재 여부가 데이터 속성 isActive의 Boolean 값에 의해 결정되는 것을 의미한다.

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

• 객체에 key가 더 있으면 여러 클래스를 토글할 수 있다.
  또한, v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있다.

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

  data: {
   isActive: true,
   hasError: false
  }

  <!-- output -->
  <div class="static active"></div>

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

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

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

• 객체가 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'
     }
   }
  }

배열

• 배열을 전달하여 class을 지정할 수 있다.

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

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

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

• 삼항연산자를 사용하여 class를 적용 할 수 있다.

  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  <!-- ↑ 같은 거 ↓ -->
  <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>
  <my-component v-bind:class="{ active: isActive }"></my-component>

  <!-- output -->
  <p class="foo bar baz boo">Hi</p>
  <p class="foo bar active">Hi</p>

  
  

Binding Inline Styles

• 클래스를 동적으로 토글하기 위해 v-bind:style에 객체를 전달할 수 있음
• 배열을 v-bind:style에 전달하여 클래스 목록을 지정할 수 있음

사용법

객체

• v-bind:style 객체 구문은 거의 CSS처럼 보이지만 JavaScript 객체이다.
• 속성 이름에 camelCase와 kebab-case(따옴표와 함께 사용)를 사용할 수 있다.

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

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

배열

• v-bind:style에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개 스타일 객체를 사용할 수 있게 한다.

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

다중 값 제공

• 브라우저가 지원하는 배열의 마지막 값만 렌더링한다.
• 아래 예제에서는 flexbox의 접두어가 붙어 있지 않은 버전을 지원하는 브라우저에 대해 display:flex를 렌더링한다.

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