v-model 디렉티브를 사용해서 form input / textarea / checkbox / radio 등 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.
v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 syntex sugar이며, 일부 경우에 특별히 주의해서 사용한다.
v-model은 모든 form 엘리먼트의 초기 value와 checked, disabled, selected 속성을 무시한다.
항상 vue 인스턴스 데이터를 원본 소스로 취급하기 때문에, 컴포넌트의 data 옵션안에 있는 Javascript에서 초깃값을 선언해야 한다.
v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. 즉, v-model은 매번 일일이 v-bind와 v-on 속성을 다 지정해 주지 않아도 편하게 개발할 수 있게 고안된 문법인 것! 아래 예시
<input v-bind:value="inputText" v-on:input="updateInput">
new Vue({
data: {
inputText: ''
},
methods: {
updateInput: function(event) {
var updatedText = event.target.value;
this.inputText = updatedText;
}
}
})
v-bind 속성은 뷰 인스턴스의 데이터 속성을 해당 html 요소에 연결할 때 사용
v-on 속성은 해당 html 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
사용자 이벤트에 의해 실행된 뷰 메서드 함수의 첫 번째 인자에는 해당 event가 들어온다.
html 입력 요소의 종류(element)에 따라 v-model 속성이 다음과 같이 구성된다.
-
input
text&textarea:value속성input이벤트 사용 -
checkbox&radio:checked속성change이벤트 사용 -
select:value속성,change이벤트 사용
기본 사용법
text input
입력한 값이 message로 들어간다.
<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>textarea
입력한 값이 message로 들어간다.
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>checkbox
하나의 체크박스는 단일 boolean 값을 가지고,
여러개의 체크박스는 같은 배열을 바인딩 할 수 있다.
element에 value를 지정한 경우, value 값을 toggle한다.
<!-- 한개의 체크박스 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 여러 개의 체크박스 -->
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>체크한 이름: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})radio
element에 value를 지정한 경우, value 값을 toggle한다.
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>select
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>선택함: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: ''
}
})v-for 를 사용한 동적 option 렌더링
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})값 바인딩하기
radio, checkbox, select option 의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크박스의 boolean)이다.
<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">
<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>checkbox
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'radio
<input type="radio" v-model="pick" v-bind:value="a">
// 체크 하면:
vm.pick === vm.aselect options
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 선택 하면:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123수식어
.lazy
v-model은 입력 이벤트 후, 입력과 데이터를 동기화 한다.
.lazy 수식어를 추가하여 change 이벤트 이후에 동기화 하도록 해준다.
<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >.number
사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 된다.
<input v-model.number="age" type="number">type="number"를 사용하는 경우에도 HTML 입력 엘리먼트 값은 항상 문자열(string)을 반환하기 때문에! 종종 유용하게 사용할 수 있다
.trim
v-model이 관리하는 input을 자동으로 앞이나 뒤에 있는 여백(띄어쓰기, 개행)을 제거하기를 원하면 trim 수정자를 추가한다.
<input v-model.trim="msg">Reference
