반응형
v-model
프론트엔드에서 입력 양식을 처리할때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가
많습니다. value를 바인딩하고 @input 이벤트로 text를 변경하는것은 번거로울 수 있습니다.
그래서 Vue에서는 이런 작업은 단순화 하도록 양방향 바인딩을 할 수 있는 v-model 디렉티브를 제공합니다.
textarea
:value, @input
v-model
checkbox, radio, select
v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)을 사용합니다.
- input text="text"와 textarea는 value 속성과 input 이벤트를 사용합니다.
- checkbox와 radio 버튼은 checked 속성와 change 이벤트를 사용합니다
- select 태그는 value 속성과 change 이벤트를 사용합니다
v-model 수식어 (modifiers)
.lazy
기본적으로, v-model은 각 imput 이벤트 후 입력과 데이터를 동기화 합니다.
(단, 앞에서 설명한 IME 구성은 제외 됩니다) lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.
쉬운 설명 : input에 글씨 쓰는 도중에는 동기화 안되고 글씨 다 쓰고 다른작업으로 넘어가면 동기화 된다.
.number
사용자 입력이 자동으로 nunber 타입으로 형변화 되길 원하면, .number 수식어를 추가하면 됩니다.
.trim
사용자가 입력한 내용에서 자동으로 공백을 제거하는 트림처리가 되길 바라면, v-model이 관리하는
input에 trim 수식어를 추가하면 됩니다
반응형
'vue.js > Vue3 - 기본편' 카테고리의 다른 글
16. npm trands (어떤 기술이 유행인지 볼 수 있음) (0) | 2024.01.28 |
---|---|
15. Watch, WatchEffect (0) | 2024.01.28 |
13. 이벤트 처리 | 이벤트 수식어 | 키 수식어 (0) | 2024.01.27 |
12. 디렉티브 (v-text, v-cloak, v-once, v-memo) | 디렉티브 구성 (0) | 2024.01.21 |
11. 목록 렌더링 (v-for) (0) | 2024.01.21 |