v-model이 뭐야?
- 프론트엔드에서 입력 양식을 처리할 때
입력 요소의 상태와자바스크립트의 상태를 동기화해야 하는 경우가 있는데, 이 작업을 단순화 하고 양방향으로 데이터 바이딩할 수 있게 Vue.js에서 제공하는 메서드 입니다
문법
<template>
<p>메세지: {{ message }}</p>
<input type="text" v-model="message" placeholder="메세지 입력하기"/>
</template>
<script>
const message = ref('')
</script>동작방식
- v-model 속성은
v-bind:value와v-on:input의 기능의 조합으로 동작한다. 매번 사용자가 일일이 v-bind와 v-on 속성을 다 지정해 주지 않아도 좀 더 편하게 개발할 수 있게 합쳐져서 만들어진 문법이라고 합니다.v-bind : 속성은 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용한다.
v-on : 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다.
위 문법에 나온 코드와 동일하게 작동
<template>
<p>메세지: {{ message }}</p>
<input type="text" :value="message" @input="message=$event.target.value"/>
</template>
<script>
const message = ref('')
</script>각 element의 차이점
v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성과 이벤트를 사용합니다.
---
input, textarea
input type=”text”와textarea는value속성과input이벤트를 사용합니다.-
:value,@input<textarea :value="textareaValue" @input="(event) => (textareaValue = event.target.value)" ></textarea> -
v-model<textarea v-model="textareaValue"></textarea>
-
checkbox, radio
checkbox와radio버튼은checked속성과change이벤트를 사용합니다.
checkbox
-
:checked,@change<input type="checkbox" :checked="checkboxValue" @change="(event) => (checkboxValue = event.target.checked)" /> -
v-model-
하나의 checkbox는 단일 boolean 값을 가집니다.
<input type="checkbox" v-model="checkboxValue" /> -
여러개의 checkbox는 배열을 바인딩할 수 있습니다.
<template> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <span>Checked names: {{ checkedNames }}</span> </template> <script> const checkedNames = ref('') </script> -
단일
checkbox일 때boolean이 아닌 다른 값을 바인딩 하고 싶다면true-value,false-value속성을 사용할 수 있다.<label> <input type="checkbox" v-model="checkboxYN" true-value="Yes" false-value="No" /> {{ checkboxYN }} </label>
radio
-
v-model<label> <input type="radio" name="type" value="O" v-model="radioValue" /> O형 </label> <label> <input type="radio" name="type" value="A" v-model="radioValue" /> A형 </label>
-
select
select태그는value속성과change이벤트를 사용합니다.-
v-model<select v-model="selectValue"> <option value="html">HTML 수업</option> <option value="css">CSS 수업</option> <option value="javascript">JavaScript 수업</option> </select>
-
v-model 수식어(modifiers)
.lazy
기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 합니다. (단, 앞에서 설명한 IME 구성은 제외됩니다.). lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.
<input v-model.lazy="text" />.number
사용자 입력이 자동으로 number 타입으로 형변환 되기를 원하면, .number 수식어를 추가하면 됩니다.
<input v-model.number="text" />.trim
사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면, v-model이 관리하는 input에 trim 수식어를 추가하면 됩니다.
<input v-model.trim="text" />