[Vue] v-model 을 잘 사용하는 방법

Vue.js에서 폼 입력 바인딩으로 많이 사용하는 v-model 유용한 기능을 살펴보려고 합니다.

값 바인딩 : 체크박스 v-model과 함께 사용하기

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

true-value와 false-value를 사용해서 toggle 데이터에 입력되는 값을 true나 false가 아니라 유연하게 개발자가 원하는 값으로 입력받을 수 있습니다.

 

위의 코드대로라면, toggle의 초기 값은 'no'입니다. checkbox를 체크하게 되면 toggle은 'yes'가 됩니다.

 

수식어

v-model.lazy

input이 아니라 change 이벤트 후에 데이터가 연동되도록 하는 수식어입니다.

ex) <input type="text" v-model.lazy="item" ></input>

 

 

v-model.number

input으로 받는 숫자는 문자열이 아닌, int type으로 데이터가 들어가게 하는 수식어입니다.

ex) <input type="text" v-model.number="item" ></input>

 

v-model.trim

input으로 받은 문자열을 자동으로 공백과 개행을 없애주는 수식어입니다.

MDN에서 String.prototype.trim()을 봤는데, 문자열 양 끝에 공백(space, tab, NBSP(줄 바꿈 없는 공백))와 모든 개행문자(LF, CR)을 없애준다고 합니다. 

 

ex) <input type="text" v-model.trim="item" ></input>

 

 

 

참고: kr.vuejs.org/v2/guide/forms.html