vue input formatting

목적은 사용자가 입력하는 값에 대해 최종적으로 의도된 formatting값으로 보여주고 싶다. 
조건은 입력하는 input UI에 표시되도록 한다. 

 

UX의 흐름은 다양할 수 있겠다. 

1. 입력하는 순간 순간 값이 formatting 되어 나타난다.

실제 UX 적으로는 경우에 따라 좋을수도 나쁠수도 있겠지만~ 

 

vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Components Basics — Vue.js

요약하자면 값이 변경되면 event를 통해서 연동정보를 업데이트 해 주는 것이다. 

react에서는 저게 당연한 방법이겠지만
vue를 사용하다 보면 v-model( 양방향 바인딩 )이라는 기능에 갇혀 생각하다 보면 해결안을 찾을 수가 없다. 

2. 입력하고 나서 UI 밖으로 포커스가 떠나면( 입력이 다 되었다는 시점으로 간주 ) formatting 된 값을 보여준다.

jsfiddle.net/mani04/bgzhw68m/

회사분께서 작업을 하시면서 공유해준 정보^^
오늘도 감사한 마음으로 공유