[Vue.js] Class & Style 바인딩

1. Class & Style 바인딩

<div v-bind:id="dynamicId"></div>

이전에 v-bind를 이용해서 Attribute 바인딩 해보았다.

 

하지만 class와 style은 문자열로만 바인딩하기엔 너무 복잡하다.

 

그래서 뷰에선 v-bind가 class 및 style과 함께 사용될 때 문자열 외에도 다양한 방법을 제공한다.

 

---

2. Class 바인딩

 

가. 객체로 바인딩

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

클래스를 동적으로 토글하는 방법이다.

 

1) 인라인

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

const isActive = ref(true)
const hasError = ref(false)

여러 클래스를 토글할 수 있습니다.

 

:class 디렉티브는 일반 class 속성과 공존할 수도 있다.

 

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

 

2) Computed property

 

바인딩된 객체는 반드시 인라인일 필요는 없다.

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

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

또는 Computed property를 사용해서 바인딩할 수 있다.

 

일반적으로 많이 사용하는 방법이다.

 

---

나. 배열로 바인딩

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

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

배열로도 바인딩할 수 있다.

 

---

다. 객체? 배열?

 

그렇다면 둘 중에 무엇을 사용해야 할까?

 

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

배열 구문 내에 객체 구문을 사용할 수 있다.

 

토글되는(boolean) 클래스라면 객체로 전달하고, 바인딩되는 클래스가 여럿이면 배열로 감싼다.

 

---

3. Style 바인딩

 

가. 객체로 바인딩

const activeColor = ref('red')
const fontSize = ref(30)

<!-- camelCase가 권장 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

:style은 객체로 바인딩할 수 있다.

 

이때 :style에 사용될 CSS 속성은 camelCase로 작성하자. (kebab-case도 지원한다)

 

const isDanger = ref(true)
const size = ref('big')

const styleObject = computed(() => ({
  color: isDanger.value ? 'red' : 'white',
  fontSize: size.value === 'big' ? '13px' : '9px'
}))

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

일반적으로 인라인 스타일에 바인딩 하는 경우, 객체를 반환하는 computed property를 사용한다.

 

---

나. 배열로 바인딩

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

스타일 객체 여러 개로 이루어진 배열을 :style에 바인딩할 수 있다.

 

---