[Vue.js] 14. v-model 수식어

.lazy 수식어

@input과는 다르게 @change는 입력이 완료된 후 포커스가 해제되면 데이터 바인딩을 한다.

이와 같은 동작을 하는 것이 .lazy 수식어.

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

this is lazy라고 입력한 후에 다른 곳을 클릭하거나 하여 포커싱이 해제되면 데이터 바인딩이 수행된다.

 

.number 수식어

기본적으로 input요소에 바인딩 되게 되면, 숫자데이터라도 문자형으로 인식되고 처리된다.

입력받은 숫자 데이터를 그대로 숫자로 활용하고 싶다면 .number 수식어를 사용한다.

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

입력받는 값이 숫자데이터가 아니라면 바인딩이 일어나지 않는다.

.trim 수식어

사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하려면 .trim 키워드를 사용한다.

이는 this.msg.trim() 메소드와 동일하다.