본문 바로가기
웹(web)/프론트엔드-vue

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

by 바코94 2020. 7. 9.

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

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

 

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

v-model.trim 을 사용한다.

 

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

v-model.number를 사용한다.

 

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

'웹(web) > 프론트엔드-vue' 카테고리의 다른 글

vue data  (0) 2020.07.09
vue component hello world  (0) 2020.07.09
form & v-model, @input  (0) 2020.07.09
event handle - modifier  (0) 2020.07.09
v-on 이벤트 핸들링 수식어  (0) 2020.07.09