[VUE.JS] 폼 바인딩(Form Input Bindings), v-model

input 바인딩

<input
  :value="text"
  @input="event => text = event.target.value">

 

v-model

<input v-model="text">

*한글 입력시, 한글자씩 늦게 반응한다.

 

v-model 수식어

.lazy

.number

.trim

<!-- "input" 대신 "change" 이벤트 후에 동기화됨 -->
<input v-model.lazy="msg" />

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

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

 

 

checkbox

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

 

radio

<div>선택한 것: {{ picked }}</div>

<input type="radio" id="one" value="하나" v-model="picked" />
<label for="one">하나</label>

<input type="radio" id="two" value="둘" v-model="picked" />
<label for="two">둘</label>

 

select

<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">다음 중 하나를 선택하세요</option>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>