티스토리 뷰
이번 포스트에서는 폼 엘리먼트(input
, textarea
, select
엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다.
1. v-model
사용법
v-model
디렉티브를 사용하여 폼 엘리먼트(input
, textarea
, select
엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model
은 모든 폼 엘리먼트의 초기 value
와 checked
, selected
속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다.
참고 - IME 사용시 유의사항
IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model
이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input
이벤트를 사용해야 합니다.
문자열
<div id="app">
<input v-model="message">
<p>메시지: {{ message }}</p>
</div>
new Vue({
el: '#app',
data: {
message: ''
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
여러줄을 가진 문장
<div id="app">
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message"></textarea>
</div>
new Vue({
el: '#app',
data: {
message: ''
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다. <textarea>{{ message }}</textarea>
는 등작하지 않습니다.
체크박스
하나의 체크박스는 boolean 값을 가집니다.
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
new Vue({
el: '#app',
data: {
checked: false
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
여러개의 체크박스는 배열 값을 가집니다.
<div id="app">
<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: '#app',
data: {
checkedNames: []
}
});
위의 예제 결과는 CodePen에서 확인할 수 있습니다.
라디오
<div id="app">
<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>
</div>
new Vue({
el: '#app',
data: {
picked: ''
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
셀렉트
하나의 셀렉트
<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>선택함: {{ selected }}</span>
</div>
new Vue({
el: '#app',
data: {
selected: ''
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
다중 셀렉트
<div id="app">
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#app',
data: {
selected: []
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
v-for
을 사용한 동적 옵션 렌더링
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
위의 예제 결과는 CodePen에서 확인 할 수 있습니다.
2. 값 바인딩하기
라디오, 체크박스, 셀렉트 옵션의 경우, 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>
v-model
에 동적으로 값을 바인딩 해야 할 경우가 있습니다. 이 때 v-bind
를 사용하면 됩니다. v-bind
를 사용하면 입력 값이 문자열이 아닌 값도 바인딩 할 수 있습니다.
체크박스
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'
true-value
와 false-value
는 input
의 value
에 영향을 미치지 않기 때문에 브라우저의 form
의 submit
에 포함되지 않습니다.
라디오
<input type="radio" v-model="pick" v-bind:value="a">
// 체크 하면:
vm.pick === vm.a
v-model
에 라디오 동적 바인딩 하기
셀렉트 옵션
<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
은 입력 이벤트 후 데이터를 동기화 합니다(IME는 제외). .lazy
수식어를 사용하여 change
이벤트 이후에 동기화 할 수 있습니다.
<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >
.number
.number
수식어는 v-model
에 사용자 입력이 숫자형으로 업데이트하기 위해 사용됩니다.
<input v-model.number="age" type="number">
type="number"
을 사용하더라도 사용자 입력 값이 항상 문자열로 바인딩되기 때문에 유용하게 사용할 수 있는 수식어입니다.
.trim
.trim
수식어는 v-model
에 사용자 입력 값이 trim
된 값을 바인딩하기 위해 사용됩니다.
<input v-model.trim="msg">
참고
'Vue.JS' 카테고리의 다른 글
[Vue.JS] 컴포넌트 (고급:props) (2) | 2019.01.21 |
---|---|
[Vue.JS] 컴포넌트 (기본) (3) | 2019.01.16 |
[Vue.JS] 이벤트 핸들링 (0) | 2018.12.06 |
[Vue.JS] 리스트 렌더링 (0) | 2018.11.25 |
[Vue.JS] 조건부 렌더링 (0) | 2018.11.20 |