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

May 30, 2025

Contents


<div class="event" :class="{ show: isOpen }">

는 HTML class 속성에 조건에 따라 클래스(show)를 추가하거나 생략하는 Vue 문법입니다.

✅ 구성 요소 분석

부분	설명
`class="event"`	항상 `event` 클래스는 적용됨 (기본 클래스)
`:class="{ show: isOpen }"`	`isOpen`이 `true`일 때만 `show` 클래스가 추가됨
`:`	`v-bind:`의 축약형. 즉 `v-bind:class`와 동일

🔍 예를 들어


<template>
  <div class="event" :class="{ show: isOpen }">이벤트 내용</div>
  <button @click="isOpen = !isOpen">토글</button>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

🔄 클릭 결과:

isOpen === false → <div class="event">...</div>

isOpen === true → <div class="event show">...</div>

💡 자주 쓰는 패턴

예시	설명
`:class="{ active: isActive }"`	`isActive`가 `true`일 때 `active` 클래스 추가
`:class="[baseClass, isRed ? 'red' : '']"`	배열을 이용한 클래스 조합
`:class="['box', { red: isRed, bold: isBold }]"`	배열 + 객체 혼합

Contents

✅ 구성 요소 분석 🔍 예를 들어 💡 자주 쓰는 패턴

Vue.js

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

KangHo Lee

May 30, 2025

Contents

✅ 구성 요소 분석 🔍 예를 들어 💡 자주 쓰는 패턴


<div class="event" :class="{ show: isOpen }">

는 HTML class 속성에 조건에 따라 클래스(show)를 추가하거나 생략하는 Vue 문법입니다.

✅ 구성 요소 분석

부분	설명
`class="event"`	항상 `event` 클래스는 적용됨 (기본 클래스)
`:class="{ show: isOpen }"`	`isOpen`이 `true`일 때만 `show` 클래스가 추가됨
`:`	`v-bind:`의 축약형. 즉 `v-bind:class`와 동일

🔍 예를 들어


<template>
  <div class="event" :class="{ show: isOpen }">이벤트 내용</div>
  <button @click="isOpen = !isOpen">토글</button>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  }
}
</script>

🔄 클릭 결과:

isOpen === false → <div class="event">...</div>

isOpen === true → <div class="event show">...</div>

💡 자주 쓰는 패턴

예시	설명
`:class="{ active: isActive }"`	`isActive`가 `true`일 때 `active` 클래스 추가
`:class="[baseClass, isRed ? 'red' : '']"`	배열을 이용한 클래스 조합
`:class="['box', { red: isRed, bold: isBold }]"`	배열 + 객체 혼합

Contents

✅ 구성 요소 분석 🔍 예를 들어 💡 자주 쓰는 패턴