[Vue.js] v-bind 문법

KangHo Lee

May 30, 2025

Contents

✅ 기본 문법 📌 예제 🧠 왜 v-bind를 쓰나?✅ 컴포넌트의 Props 바인딩에도 사용

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" />

[Vue.js] v-bind 문법

✅ 기본 문법

📌 예제

📍 1. src, href, id 등에 동적 값 바인딩

📍 2. 클래스(class)와 스타일(style) 바인딩

🧠 왜 v-bind를 쓰나?

✅ 컴포넌트의 Props 바인딩에도 사용

📍 1. `src`, `href`, `id` 등에 동적 값 바인딩