[Vue.js] 조건에 따라 클래스 추가하기

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

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

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

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
.active {
  background-color: yellow;
}
</style>

Vue.js에서는 조건에 따라 클래스를 추가할 수 있습니다. 이를 위해 v-bind:class 또는 :class 디렉티브를 사용할 수 있습니다.

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

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