[Vue.js] 동적 클래스 바인딩

<template>
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  >
    이 요소는 isActive와 hasError 변수의 값에 따라 클래스가 추가됩니다.
  </div>
</template>

<script setup>
import { ref } from 'vue';

// isActive와 hasError 변수 생성
const isActive = ref(true);
const hasError = ref(false);
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
.static {
  border: 1px solid black;
  padding: 10px;
}

.active {
  background-color: yellow;
}

.text-danger {
  color: red;
}
</style>

Vue.js에서는 클래스를 동적으로 추가하기 위해 v-bind:class 또는 :class 디렉티브를 사용할 수 있습니다.

위의 예제는 isActive와 hasError 변수의 값에 따라 클래스를 추가하는 예제입니다. <div> 요소에는 :class="{ active: isActive, 'text-danger': hasError }"를 사용하여 isActive 변수의 값이 true이면 active 클래스를 추가하고, hasError 변수의 값이 true이면 text-danger 클래스를 추가하도록 설정했습니다. 따라서 변수의 값에 따라 요소의 스타일이 동적으로 변경됩니다.

이를 통해 Vue.js를 사용하여 동적으로 클래스를 추가할 수 있으며, 이는 컴포넌트의 스타일을 보다 유연하게 제어할 수 있습니다.