폼 입력 바인딩 수식어

이전 시간의 폼 입력 바인딩에 이어 Vue.js의 v-model 수식어에 대해 알아봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. v-model 수식어

1.1 lazy

  <input
    type="text" :value="msg" @change="msg = $event.target.value" />

change라는 이벤트는 값이 바뀌고 나서 데이터가 갱신됩니다. 다시 말해, 입력하는 동안에는 값이 갱신되지 않고, 입력이 완료되면 값이 갱신됩니다.

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

이와 같은 역할을 수행하는 것이 v-model의 수식어 lazy입니다. 바로 갱신되는 것이 아니라 게으르게 바뀌게 되므로 이러한 키워드를 사용한 것으로 보이네요. 사용법은 위와 같이 체이닝 방식으로 연결하시면 됩니다.

1.2 number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다. 데이터에 숫자를 입력하면, 기본값이 string이므로 위와 같이 형변환을 시켜주셔야 합니다.

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

1.3 trim

trim은 string의 메소드로 주변의 공백이 발생하게 되면, 이를 무시하는 메소드로 배운 적이 있습니다. 이또한 똑같은 역할을 하게 되고, v-model.trim과 같이 사용해주시면 됩니다.

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