폼 입력값의 V-Model의 수식어 v-model.lazy/v-model.number/v-model.trim

VueJS의 입력폼엔 사용되는 v-model에는 modifier(수식어)가 사용될 수 있습니다. 사용 가능한 수식어는 아래와 같습니다.

v-model.lazy v-model.number v-model.trim

위 수식어를 v-model 프로퍼티와 함께 사용하면 좀 더 편리한 기능을 간단하게 제공합니다. 그럼 위 수식어 들을 하나씩 알아봅니다.


! v-model.lazy
입력된 값이 바로 data에 반영되지 않고 엔터를 누르거나 포커스가 벗어나는 등의 이벤트가 발생할 경우에만 값이 반영되어 나타납니다. lazy는 debounce와는 다르니 참고하세요.

! v-model.number 알아보기
input 폼을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 문자로 나타나게됩니다. 이 경우 타입을 number 즉, 숫자로 자동으로 바꾸어주는 방법으로 v-model.number를 사용할 수 있습니다.

 

<input v-model.number="test" type="text" />
{{ typeof test }}

위 예제는 test의 값의 타입을 표현식으로 출력해주는 예제입니다. 만약 몇 가지 값들을 입력하고 출력 결과를 확인하면 아래와 같습니다.

abc  //  'String'
ab123  //  'String'
123  //  'Number'
123abc  //  'Number' 단 뒤의 문자는 무시됨

보시는 것처럼 문자로 입력하면 당연히 문자로 결과를 반환합니다. 다만 숫자인 경우 숫자 타입이 반환되는 것을 알 수 있죠.


! v-model.trim 알아보기
trim 함수와 동일하게 입력값의 앞과 두의 공백을 제거해줍니다.

<input v-model.trim="test" />
{{ '1' + trim + '2' }}

 

위와 같은 예제가 있는 경우 앞 뒤 공백을 제거하여 줍니다. 즉 만약 입력한 값이 다음과 같다면

'123 '
' 123'
' 123 '
 
'123' // test의 값은 모두 동일하게 123