13_양방향 바인딩 (v-model)

프론트엔드에서 입력 양식을 처리할 때, 입력요소의 상태와 자바스크립트 상태를 동기화 하고 싶을 때 사용.

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

위의 코드처럼 value에 text를 바인팅하고 @input 이벤트로 상태를 변경하는 것보다

<input v-model="text" />

 

v-model로 간단하게 사용 가능함

 

1. textarea

<textarea v-model="textareaValue"></textarea>

 

2.checkbox, radio, select

: HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)와 이벤트(@input)을 사용함.

 

1)input type="text"와 textarea는 value 속성과 input 이벤트 사용

 

2)checkbox와 radio버튼은 checked 속성과 change이벤트

[checkbox]

<input
  type="checkbox"
  :checked="checkboxValue"
  @change="(event) => (checkboxValue = event.target.checked)"
/>

<input
  type="checkbox"
	v-model="checkboxValue"
/>

 

(1)checkbox 하나인 경우는 단일 boolean 값을 가짐

<label>
  <input type="checkbox" v-model="checkboxValue" />
  {{ checkboxValue }}
</label>

 

(2)checkbox 여러개인 경우 배열 바인딩 가능함

<div>
  <label>
    <input type="checkbox" v-model="checkboxValues" value="html" />
    HTML
  </label>
  <label>
    <input type="checkbox" v-model="checkboxValues" value="css" />
    CSS
  </label>
  <label>
    <input type="checkbox" v-model="checkboxValues" value="javascript" />
    JavaScript
  </label>
  <p>
    {{ checkboxValues }}
  </p>
</div>

 

(3)checkbox 값 바인딩 : 단일 checkbox인 경우 boolean 이외의 값을 바인딩 하고싶으면 true-value, false-value 속성 사용

<label>
  <input
    type="checkbox"
    v-model="checkboxYN"
    true-value="Yes"
    false-value="No"
  />
  {{ checkboxYN }}
</label>

 

[radio]

<label>
  <input type="radio" name="type" value="O" v-model="radioValue" />
  O형
</label>
<label>
  <input type="radio" name="type" value="A" v-model="radioValue" />
  A형
</label>

 

3) select버튼은 value속성과 change 이벤트 사용

<select v-model="selectValue">
  <option value="html">HTML 수업</option>
  <option value="css">CSS 수업</option>
  <option value="javascript">JavaScript 수업</option>
</select>

 

3. v-model 수식어

1).lazy

: 각 이벤트 후 입력과 동시에 데이터를 동기화하는데 lazy수식어를 추가하면 change이벤트 이후에 동기화 가능.

<input v-model.lazy="text" />

 

2).number

: 사용자의 입력이 자동으로 숫자형으로 변환되길 바랄 때

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

 

3).trim

: 사용자 입력 내용에서 자동으로 앞뒤 공백 제거하고 싶을 때

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