🎈 :(디렉티브 바인딩)
콜론(:)은 Vue의 디렉티브 바인딩을 의미해.
즉, :속성="값" 형태로 사용하면 속성 값을 동적으로 바인딩할 수 있어.
📌 [예제 1]: id를 동적으로 설정
<input :id="'check-' + item.no" type="checkbox" />➡️ item.no 값이 4라면, id="check-4"가 됨.
➡️ item.no 값이 10이라면, id="check-10"이 됨.
만약 : 없이 이렇게 쓰면?
<input id="check-" + item.no type="checkbox" />❌ 이건 잘못된 코드야! Vue가 item.no를 값으로 해석하지 않고, 그냥 문자열로 처리해버려.
📌 [예제 2]: class 동적 바인딩
<div :class="{ active: isActive, disabled: isDisabled }"></div>➡️ isActive가 true면 class="active" 추가
➡️ isDisabled가 true면 class="disabled" 추가
➡️ 둘 다 true면 class="active disabled"
만약 : 없이 이렇게 쓰면?
<div class="{ active: isActive, disabled: isDisabled }"></div>❌ Vue가 { active: isActive, disabled: isDisabled }를 문자열로 인식해서 class="{ active: isActive, disabled: isDisabled }" 그대로 적용됨.
📌 정리
✅ :(콜론)은 Vue의 바인딩 문법
✅ :속성="값" → 값이 동적으로 변경됨
✅ 속성="값" → 값이 문자열 그대로 적용됨
그래서 :id="'check-' + item.no" 같은 방식이 필요한 거야! 🚀
