v-bind는 HTML 속성(또는 컴포넌트 prop)을 JavaScript 표현식에 동적으로 바인딩하여, 데이터가 변경되면 속성이 반응적으로 갱신되도록 합니다. 단축형은 그냥 :입니다.
vue
<script setup>
import { ref } from "vue";
const imageUrl = ref("/photo.jpg");
const isDisabled = ref(true);
const id = ref("main");
</script>
<template>
<img v-bind:src="imageUrl" /> <!-- 전체 문법 -->
<img :src="imageUrl" /> <!-- 단축형 (관용적) -->
<button :disabled="isDisabled">Save</button>
<div :id="id" :data-index="5">...</div>
</template>
과 의 차이는 결정적입니다. 가 없으면 리터럴 문자열이고, 가 있으면 Vue가 표현식을 평가합니다.