[Vue.js] Class와 Style 동적 바인딩

📌 1. HTML 클래스 동적 바인딩

클래스를 동적으로 바인딩 하기 위해서는 :class(v-bind:class)를 사용할 수 있다.

1) 객체 바인딩 ① - 클래스 객체 동적 바인딩

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

<script setup>
const isActive = ref(true);
</script>

위의 예시는 클래스 동적 바인딩의 기본적인 예시다.
isActive가 true이므로, 클래스에 acitve가 바인딩된다.

개발자 도구를 켜서 확인해보면, <div class="acitve"> 를 확인 할 수 있다.
이처럼 클래스의 값을 동적으로 바인딩 시킬 수 있다.

2) 객체 바인딩 ② - 스타일 동적 바인딩

이번엔 동적 바인딩 된 클래스를 이용해 동적으로 스타일을 입혀보자.

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

<script setup>
const isActive = ref(true);
</script>

<style>
.active {
	font-weight: 900;
}
</style>

클래스를 동적으로 바인딩 했으므로, isActive가 true라면 active가 바인딩 되어 해당 클래스의 스타일이 적용된다.

예를 들어, 버튼 클릭 이벤트로 isActive를 true 혹은 false로 변경해 스타일을 변환 시킬 수 있다.

3) 객체 바인딩 ③ - 일반 클래스 속성과 공존

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

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

위와 같이 일반 클래스 속성과 공존하여 <div class="text active"> 로 될 수 있다.

4) 객체 바인딩 ④ - 여러개의 속성 부여

클래스를 동적 바인딩 할 때, 여러개의 속성을 줄 수 있다.

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

isActive와 hasError 모두 true라면, <div class="text active text-danger">이 될 것이다.

5) 객체 바인딩 ⑤ - computed 바인딩

객체를 반환하는 computed에 바인딩 할 수도 있다.

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

<script setup>
  const classObject = computed(() => {
    return {
      active: isActive.value && !hasError.value,
      'text-danger': !isActive.value && hasError.value,
    };
});
</script>

6) 객체 바인딩 ⑥ - 배열에 바인딩

배열에 :class를 바인딩하여 클래스 목록을 적용할 수 있다.

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

<script setup>
  const activeClass = ref('active')
  const errorClass = ref('text-danger')
</script>

위는 <div class="active text-danger">과 같은 결과를 가져온다.

7) 객체 바인딩 ⑦ - 조건 바인딩

클래스에서 마찬가지로 조건을 줄 수 있다.

<template>
	<div :class="[isActive ? 'active-class' : 'class', errorClass]">		
    </div>
</template>

<script setup>
  const isActive = ref(true)
  const errorClass = ref('text-danger')
</script>

---

📌 2. 인라인 스타일 동적 바인딩

<template>
	<div :style="styleObject">	
      예시 텍스트입니다.
    </div>
</template>

<script setup>
  const styleObject = reactive({
  	color: 'red',
    fontSize: '13px'
  })
</script>

위와 같이, 스크립트에 스타일을 작성해 조건을 주며 동적으로 style을 부여할 수 있다.

클래스와 마찬가지로 배열 혹은 computed를 이용해 객체 반환으로 바인딩 할 수도 있다.
변수마다 값을 부여하고 해당 변수를 사용하는 방법도 있지만, 가독성이 좋지 않아 추천하지 않는 방식이다.

---

[참고문헌]

vue.js 기본편 - 짐코딩 인프런 강의 참조