데이터 분석 기술 블로그

Vue에 대하여(6)_Form Input Bindings 본문

프론트엔드

Vue에 대하여(6)_Form Input Bindings

데이터분석가 이채은 2024. 7. 17. 09:00

1. Form Input Bindings

form을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화해야 하는 경우(양반향 바인딩)

 

  • 양방향 바인딩 방법
    • v-bind와 v-on을 함께 사용
    • v-model 사용

1-1. v-bind와 v-on을 함께 사용


1-2. v-model 사용

v-model이란, form input 요소 또는 컴포넌트에서 양방향 바인딩을 만듭니다.


2. v-model 활용

v-model은 단순 text input 뿐만 아니라 Checkbox, Radio, Select 등 다양한 타입의 사용자 입력 방식과 함께 사용 가능합니다.

2-1. Checkbox 활용


2-2.  Select 활용


참고

IME(Input Method Editor)