v-model (양방향 바인딩)

v-model

타입

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

설명

🔖 사용자 입력을 받는 폼(form) 엘리먼트 또는 컴포넌트에 양방향 바인딩

제한 사용 - 사용 가능한 목록

• <input>
• <select>
• <textarea>
• 컴포넌트

수식어

수식어	설명
.lazy	input 대신 change 이벤트를 수신함.
.number	유효한 입력 문자열을 숫자로 변환하여 전달. 인풋에 type="number"가 있으면 .number 수식어가 자동으로 적용
.trim	사용자가 입력한 값의 공백(” ”) 제거

세부사항

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

사용법

<input
  :value="text"
  @input="event => text = event.target.value">
<!-- === -->
<input v-model="text">