[VUE.JS] 클래스와 스타일 바인딩(Class and Style Bindings)

https://v3-docs.vuejs-korea.org/guide/essentials/class-and-style.html

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

 

클래스와 스타일 바인딩

클래스를 동적으로 토글하기 위해 객체를 :class(v-bind:class의 줄임말)에 전달할 수 있다

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


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


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

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


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