form에서 입력 양식을 처리할 때 입력 요소의 값과 자바스크립트 요소의 값을 동기화 해야 하는 경우가 많다.
input
아래 태그에서 처럼 input 태그의 입력이 있을 때마다 @input 디렉티브를 통해서 value 를 동기화 해주어야 한다.
const inputValue = ref('');
JavaScript
복사
<input
type="text"
:value="inputValue"
@input="event => (inputValue = event.target.value)"
/>
HTML
복사
이 작업을 단축한 것이 v-model 디렉티브이다. v-model 디렉티브를 사용하면 아래와 같이 코드를 줄일 수 있다.
<input type="text" v-model="inputValue" />
HTML
복사
이렇게 v-model 을 사용하면 자동으로 양방향 데이터 바인딩이 가능하다.
checkbox
const checkboxValue = ref(true);
JavaScript
복사
<input type="checkbox" id="checkbox" v-model="checkboxValue" />
<label for="checkbox">{{ checkboxValue }}</label>
HTML
복사
이렇게 했을 때는 checked 상태가 어떤가에 따라서 보여지는 화면은 아래와 같을 것 이다.
Radio
const radioValue = ref(true);
JavaScript
복사
<label>
<input type="radio" name="type" value="HTML" v-model="radioValue" />
HTML
</label>
<label>
<input type="radio" name="type" value="CSS" v-model="radioValue" />
CSS
</label>
<div>{{ radioValue }}</div>
HTML
복사
Select
const selectValue = ref('HTML');
JavaScript
복사
<select v-model="selectValue">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<div>{{ selectValue }}</div>
HTML
복사
이렇게 v-model 은 HTML 요소가 무엇이냐에 따라서 서로 다른 속성과 이벤트를 처리한다.
HTML | 처리 속성 | 처리 이벤트 |
input type=”text” | value | input |
input type=”textarea” | value | input |
input type=”checkbox” | checked | change |
input type=”radio” | checked | change |
input type=”select” | value | change |
