폼 입력 바인딩
기본 사용법
v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩 생성 가능
입력 유형에 따라 엘리먼트를 업데이트하는 방법을 자동으로 선택함
이때 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에는 주의해야 함
v-model은 모든 form 엘리먼트 초기 value, checked, selected 속성 무시,
컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다.
v-model는 한국어가 업데이트가 되지 않으므로 input을 사용해야 함.
문자열
<input v-model="message" placeholder="수정해보세요">
<p>메시지: {{ message }}</p>
박스에 내용을 넣으면 실시간으로 message에 바인딩되어 결과가 나타남
여러줄을 가진 문장
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄 입력하세요"></textarea>마찬가지로 message에 바인딩 되어 결과 나타남
이때 <textarea>{{ text }}</textarea> 는 작동하지 않음
체크박스
하나의 체크박스는 단일 boolean 값을 가짐
<input type="checkbox" id="checkbox" v-model="checked">
</label for="checkbox">{{ checked }}</label>
//HTML
<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>
//JavaScript
new Vue({
el: '...',
data: {
checkedNames: []
}
})
라디오
<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>
셀렉트
//HTML
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>선택함: {{ selected }}</span>
//JavaScript
new Vue({
el: '...',
data: {
selected: ''
}
})
<select v-model="selected" multiple>을 쓰면 다중선택 가능
v-for를 이용한 동적 욥션 렌더링
//HTML
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
//JavaScript
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
값 바인딩하기
라디오, 체크박스, 셀렉트 옵션의 경우 v-model 바인딩 값은 보통 정적인 문자열이다
<!-- `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-bind를 사용하면 되고, 이것을 사용하면 입력값을 문자열이 아닌 값에 바인딩 할 수 있다.
체크박스
//HTML
<input type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b"
>
//JavaScript
// 체크 하면:
vm.toggle === vm.a
// 체크하지 않으면:
vm.toggle === vm.b라디오
//HTML
<input type="radio" v-model="pick" v-bind:value="a">
//JavaScript
vm.pick === vm.a셀렉트 옵션
//HTML
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
//JavaScript
typeof vm.selected
vm.selected.number수식어
.lazy
기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 함
.lazy를 추가해 change이벤트 이후에 동기화 할 수 있음
<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg>뭔말인지 모르겠다..
.number
사용자 입력이 자동으로 숫자로 바뀌게 하려면 다음과 같이 사용
<input v-model.number="age" type="number">.trim
input을 자동으로 trim 하려면 다음과 같이 하면 된다.
<input v-model.trim="msg">추가적으로 재사용 가능한 input을 컴포넌트로 만들 수 있고 v-model에도 작동함
'개발 > Vue.js' 카테고리의 다른 글
| Vue 기본자료 포스팅 완료! (0) | 2017.04.06 |
|---|---|
| 10. 컴포넌트 (0) | 2017.04.06 |
| 8. 이벤트 핸들링(v-on) (0) | 2017.03.31 |
| 7. 리스트 렌더링(v-for, v-if) (0) | 2017.03.31 |
| 6. 조건부 렌더링(v-if, v-else-if, v-else, v-show) (0) | 2017.03.30 |
