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

객체로 바인딩 하기

<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
    }
  }
}

//렌더링 결과
<div class="active"></div>

 

객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다. 

<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'
    }
  }
}

배열로 바인딩 하기

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

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

// 렌더링 결과
<div class="active text-danger"></div>

컴포넌트에서 사용하기

<!-- 자식 컴포넌트의 템플릿 -->
<p class="foo bar">안녕!</p>

<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />

// 렌더링 결과
<p class="foo bar baz boo">안녕!</p>