[Vue.js] 배열로 클래스 바인딩하기

<template>
  <div :class="[activeClass, errorClass]">
    이 요소는 activeClass와 errorClass 변수의 값에 따라 클래스가 추가됩니다.
  </div>
</template>

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

// activeClass와 errorClass 변수 생성
const activeClass = ref('active');
const errorClass = ref('text-danger');
</script>

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

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

Vue.js에서는 클래스를 배열로 바인딩하여 여러 클래스를 동시에 추가할 수 있습니다.

위의 예제는 activeClass와 errorClass 변수의 값에 따라 클래스를 배열로 바인딩하여 <div> 요소에 적용하는 예제입니다. <div> 요소에 :class="[activeClass, errorClass]"를 사용하여 activeClass와 errorClass 변수의 값에 따라 해당 클래스가 추가되도록 설정했습니다. 따라서 배열로 바인딩된 클래스는 동시에 적용되며, 변수의 값에 따라 요소의 스타일이 동적으로 변경됩니다.

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