v-bind : 데이터 연결 - 바인딩 속성

v-bind

타입

any (인자 있이) | Object (인자 없이)

설명

🔖 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩 html의 속성인 id, class, style 등에 대해 model 데이터를 연결할 때 사용

속성

:src	이미지 데이터 연결
:href	링크를 통한 연결
:class, v-bind:style	스타일시트 연결
:key	키를 통한 연결

수식어

수식어 설명

.camel	kebab-case 속성 이름을 camelCase로 변환
.prop	바인딩을 https://developer.mozilla.org/en-US/docs/Web/API/Element#properties으로 강제 설정
.attr	바인딩을 https://developer.mozilla.org/en-US/docs/Glossary/Attribute으로 강제 설정.

세부사항

• class 또는 style 속성을 바인딩하는 데 사용되는 경우
  • v-bind는 배열 또는 객체와 같이 값을 추가할 수 있는 타입을 지원
• 컴포넌트 prop 바인딩에 사용될 때 prop은 자식 컴포넌트에서 적절하게 선언
• 인자 없이 사용하는 경우, 속성을 이름-값 쌍으로 포함하는 객체를 바인딩하는 데 사용 가능

약식

<div 
	v-bind:속성명="데이터 혹은 함수"
	:속성명="데이터 혹은 함수"
>

사용법

<!-- 속성 바인딩 -->
<img v-bind:src="imageSrc" />

<!-- 동적인 속성명 -->
<button v-bind:[key]="value"></button>

<!-- 단축 문법 -->
<img :src="imageSrc" />

<!-- 같은 이름 생략 가능 (version : 3.4+), 오른쪽과 같음 :src="src" -->
<img :src />

<!-- 단축 문법과 동적 속성명 -->
<button :[key]="value"></button>

<!-- 인라인으로 문자열 결합 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 바인딩 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 바인딩 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 속성을 객체로 바인딩 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 바인딩. "prop"은 자식 컴포넌트에서 선언되어 있어야 함 -->
<MyComponent :prop="someThing" />

<!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

• .prop 수식어에는 전용 단축 문법 .

<div :someProperty.prop="someObject"></div>
<!-- 위 코드는 아래와 같이 단축할 수 있음 -->
<div .someProperty="someObject"></div>