폼 입력 바인딩, 모델
https://ryuzuka.github.io/VUE/tutorial/05_form.html
v-model
폼 엘리먼트에 대한 양방향 데이터 바인딩 생성
input, textarea, select
<div id="app">
<input type="text" v-model="inputText">
<input type="radio" id="inputRadio" value="inputRadio" v-model="inputRadio"><label for="inputRadio">inputRadio</label>
<input type="checkbox" id="inputCheck" value="inputCheck" v-model="inputCheck"><label for="inputCheck">inputCheck</label>
<textarea v-model="textarea">textarea</textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
inputText: 'inputText',
inputRadio: 'inputRadio',
inputCheck: ['inputCheck'],
textarea: 'textarea'
}
});
</script>
v-on:input
IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않는다. input 이벤트를 대신 사용
수식어
.lazy - v-model은 입력 이벤트 후 데이터를 동기화(IME는 제외). .lazy 수식어를 사용하여 change 이벤트 이후에 동기화 가능
.trim - .trim 수식어는 v-model에 사용자 입력 값이 trim 된 값을 바인딩하기 위해 사용 ( 초기값에 대해서는 적용되지 않음 )
.number - .number 수식어는 v-model에 사용자 입력이 숫자형으로 업데이트하기 위해 사용
<input type="text" v-model.lazy="lazy">
<input type="text" v-model.trim="trim">
<input type="text" v-model.number="number">
* 무조건 값이 number형으로 변환되진 않습니다. 첫 문자부터 Number형으로 변환 가능한 부분까지만 변환되고 그 뒤의 부분은 무시당한 채로 값이 업데이트 됩니다. 첫문자부터 변환할 수 없는 문자라면, string을 반환합니다.