[Vue.js] 폼 입력 바인딩

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다

 

v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송.

• text와 textarea 태그는 value 속성과 input 이벤트를 사용
• 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용
• select 태그는 value 를 prop로, change를 이벤트로 사용

text

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

 

textarea -> mustache는 불가

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

 

체크박스 -> v-model 바인딩 값 : 체크박스의 boolean

// 하나의 체크박스
<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: []
  }
})

 

라디오버튼 -> v-model 바인딩 값 : 정적인 문자열

<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 -> v-model 바인딩 값 : 정적인 문자열

// 하나의 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: ''
  }
})

// 여러개의 select
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

 

v-bind를 사용해 입력 값을 문자열이 아닌 값에 바인딩 할 수 있다.

 

 

 

https://kr.vuejs.org/v2/guide/forms.html