본문 바로가기
Vue.js

폼 입력 바인딩

KimJye 2019. 1. 15. 16:12


기본 사용법

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택한다. 

약간 이상하지만 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에 특별한 주의를 해야한다.


v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시해야한다.

항상 Vue 인스턴스 데이터를 원본 소스로 취급한다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야한다.


# 예제 


<body>
<div id="app">
<!--문자열 -->
<input v-model="message" placeholder="여기를 수정해보세요" />
<p>메시지: {{ message }}</p>
<br />
<hr>

<!--여러 줄을 가진 문장-->
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message2 }}</p>
<br />
<textarea v-model="message2" placeholder="여러줄을 입력해보세요"></textarea>
<br />
<hr>

<!--체크 박스-->
<!--하나의 체크박스는 단일 boolean 값을 가집니다.-->
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
</br>
<hr>

<!--여러개의 체크박스는 같은 배열을 바인딩 할 수 있습니다-->
<input type="checkbox" id="jack" value="Ruby" v-model="checkedNames" />
<label for="ruby">Ruby</label>
<input type="checkbox" id="tiber" value="Tiber" v-model="checkedNames" />
<label for="tiber">Tiber</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label> <br />
<span>체크한 이름: {{ checkedNames }}</span>
</br>
<hr>

<!--라디오-->
<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>
</br>
<hr>

<!--셀렉트-->
<!--하나의 셀렉트-->
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>선택함: {{ selected }}</span>
</br>
<hr>

<!--다중 셀렉트 (배열을 바인딩 합니다):-->
<select v-model="selected2" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected2 }}</span>
</br>
<hr>
<!--v-for를 이용한 동적 옵션 렌더링-->
<select v-model="selected3">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected3 }}</span>
</div>

<script>
new Vue({
el: "#app",
data: {
message: "", message2: "", checked: "", checkedNames: [], picked: "",
selected:'', selected2: [], selected3: '',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
</script>
</body>





값 바인딩하기

라디오, 체크박스 및 셀렉트 옵션의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크 박스의 boolean) 이다.

그러나 때로 값을 Vue 인스턴스에 동적 속성에 바인딩 해야할 수 있다. v-bind를 사용할 수 있다. v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩 할 수도 있다.


예제 : 

<body>
<!--체크 박스-->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

<!--라디오-->
<input type="radio" v-model="pick" v-bind:value="a">

<!--셀렉트-->
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>

<script>
// 체크박스
// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'
//-------------------------
// 라디오
// 체크 하면:
vm.pick === vm.a

// 셀렉트
// 선택 하면:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
</script>
</body>


true-value 와 false-value 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 value 속성에 영향을 미치지 않는다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : ‘예’ 또는 ‘아니요’) 라디오를 대신 사용하라.



수식어


# .lazy


기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 한다. (단 앞에서 설명한 IME 구성은 제외.) .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있다.


<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg">



# .number


사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 된다.


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

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있다.



# .trim


v-model이 관리하는 input을 자동으로 trim 하기 원하면, trim 수정자를 추가하면 된다.


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



저작자표시 비영리 변경금지

'Vue.js' 카테고리의 다른 글

Reactivity  (0) 2020.01.20
컴포넌트  (0) 2019.01.30
이벤트 렌더링  (0) 2019.01.15
리스트 렌더링  (0) 2019.01.14
조건부 렌더링  (0) 2019.01.14

'Vue.js' Related Articles

티스토리툴바