웹(web)/프론트엔드-vue

@change, v-model+lazy,number,trim

바코94 2020. 7. 9. 17:15

input에서 입력하는 순간순간 변경되는 것이 아니라 엔터를 치거나 focus가 사라졌을 때 변경되도록 하려면 어떻게 해야할까?

@change에 핸들러를 붙이거나 v-model.lazy를 사용하면 된다.

 

input text에서 입력된 value의 값이 있을 때 좌우측 공백을 제거해서 데이터에 반영하려면 어떻게 해야할까?

v-model.trim 을 사용한다.

 

input text에 입력된 value가 숫자인 경우에 자동으로 int형태로 캐스팅해서 데이터에 반영하려면 어떻게 해야할까?

v-model.number를 사용한다.

 

아래 코드를 보면서 위의 설명을 확인하도록 하자. v-model은 양방향 바인딩이다.