Vue.js] 9. Form 입력 바인딩

<input v-model="text">

<p>메세지: {{ message }}</p>
<input v-model="message" placeholder="메세지 입력하기" />

<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>

체크박스
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

라디오
<div>선택한 것: {{ picked }}</div>

<input type="radio" id="one" value="하나" v-model="picked" />
<label for="one">하나</label>

<input type="radio" id="two" value="둘" v-model="picked" />
<label for="two">둘</label>

단일 셀렉트:
<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">다음 중 하나를 선택하세요</option>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

값 바인딩 하기

라디오, 체크박스 및 셀렉트 옵션의 경우, v-model에 바인딩된 값은 일반적으로 정적 문자열(체크박스의 경우 불리언)입니다.

<!-- `picked`는 선택 시 문자열 "가"입니다. -->
<input type="radio" v-model="picked" value="가" />

<!-- `toggle`은 true 또는 false입니다. -->
<input type="checkbox" v-model="toggle" />

<!-- `selected`는 첫 번째 옵션이 선택될 때 문자열 "한글"입니다. -->
<select v-model="selected">
  <option value="한글">한글</option>
</select>

그러나 때로는 현재 활성 인스턴스의 동적 속성에 값을 바인딩하고 싶을 수도 있습니다. 이것을 구현하기 위해서는 v-bind를 사용해야 합니다. 또한 v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩할 수 있습니다.

<input
  type="checkbox"
  v-model="toggle"
  true-value="네"
  false-value="아니오" />
  
  <input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

pick는 첫 번째 라디오 입력이 확인되면 first 값으로 설정되고 두 번째 라디오 입력이 확인되면 second 값으로 설정됩니다.

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

 

v-model은 문자열이 아닌 값의 바인딩도 지원합니다! 위의 예에서 옵션이 선택되면 selected는 { number: 123 } 객체 값으로 설정됩니다.

<select v-model="selected">
  <!-- 인라인 객체 리터럴 -->
  <option :value="{ number: 123 }">123</option>
</select>

수식어

사용자 입력이 자동으로 숫자로 유형 변환

<input v-model.number="age" />

 

사용자 입력의 공백이 자동으로 트리밍

<input v-model.trim="msg" />