![[Vue.js] v-bind 문법](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-05-30T01%3A13%3A11.706Z-ba1d0e66-9f91-4a97-bfed-18d4495ba45c&w=3840&q=75)
v-bind는 Vue.js에서 HTML 속성에 JavaScript 표현식(데이터)을 연결(bind) 하기 위해 사용하는 디렉티브입니다.쉽게 말해, 속성에 동적으로 값을 넣어주는 역할을 합니다.
✅ 기본 문법
<!-- 일반적인 속성 -->
<img v-bind:src="imageUrl">
<!-- 축약형 -->
<img :src="imageUrl">v-bind:속성명="값"형태로 사용
:는v-bind:의 축약형
📌 예제
📍 1. src, href, id 등에 동적 값 바인딩
<a v-bind:href="link">링크</a>
<!-- 또는 -->
<a :href="link">링크</a>
<script>
export default {
data() {
return {
link: 'https://google.com'
}
}
}
</script>📍 2. 클래스(class)와 스타일(style) 바인딩
<!-- 클래스에 객체 전달 -->
<div :class="{ active: isActive }"></div>
<!-- 인라인 스타일 바인딩 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
🧠 왜 v-bind를 쓰나?
목적 | 설명 |
동적 속성 바인딩 | JS 값이나 계산된 값에 따라 속성이 바뀜 |
재사용성 향상 | 컴포넌트화하거나 props로 전달 가능 |
유지보수 용이 | 하드코딩 대신 데이터에 따라 유연하게 처리 |
✅ 컴포넌트의 Props 바인딩에도 사용
<MyComponent :title="post.title" :likes="post.likes" />Share article