v-bind 해부: 동적 속성 바인딩

핵심 개념

v-bind(:)는 HTML 속성을 동적으로 바인딩합니다. :class로 동적 클래스, :style로 동적 스타일을 적용합니다. v-bind를 지우며 동적 속성이 어떻게 사라지는지 확인하십시오.

코드 분석

VUE📋 코드 (23줄)



const { createApp, ref } = Vue;
createApp({
  setup() {
    const isActive = ref(false);
    const threat = ref(5);
    const color = ref('#22c55e');
    return { isActive, threat, color };
  },
  template: `
    <div>
      <div :style='{ color: color, fontWeight: isActive ? "bold" : "normal", fontSize: threat + "px" * 2 }' style='margin-bottom:12px; font-size:14px;'>
        UNIT STATUS: {{ isActive ? "ACTIVE" : "STANDBY" }}
      </div>
      <div style='display:flex; gap:8px; flex-wrap:wrap;'>
        <button @click='isActive = !isActive' :style='{ background: isActive ? "#10b981" : "#333" }' style='color:#e8e8e8; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:11px;'>TOGGLE</button>
        <button @click='threat = Math.min(10, threat+1)' style='background:#f59e0b; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:11px;'>THREAT+</button>
        <input v-model='color' type='color' style='width:40px; height:28px; border:none; cursor:pointer;' />
      </div>
    </div>
  `
}).mount('#bind-output');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'v-bind' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'v-bind'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'v-bind' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'v-bind'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

v-bind 해부: 동적 속성 바인딩은 이 3가지만 확실히 잡으세요

1.HTML 속성에 문자열을 하드코딩하면 데이터 변경 시 수동으로 DOM을 업데이트해야 합니다

2.v-bind(:)는 HTML 속성을 JavaScript 표현식에 연결해서 데이터가 바뀌면 속성도 자동으로 반영됩니다

3.다음 챕터에서 입력 필드와 데이터를 양방향으로 연결하는 v-model을 배웁니다

💬 이 챕터 질문 보기

VUE · CH.7 — 질문하거나 답변을 확인하세요

→

진행도 7 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)