양방향 바인딩

폼 입력 양식과 반응형 상태를 동기화 할 수 있는 방법

v-bind를 통해서 바인딩하는 방법을 배웠음.

text => v-bind 로 바인딩 됨..

input에서 우리가 어떤 글을 작성해서 value를 변경하면

그 반대는 동기화가 되지 않는다.

입력 요소의 상태와

자바스크립트의 데이터 상태를 동기화 할 때 사용함.

v-model을 사용하면 됨.

<template>
	<div>
		<h2>input value</h2>
		<input type="text" :value="inputValue" />
		<div>{{ inputValue }}</div>
	</div>
</template>

<script>
	import { ref } from 'vue';
	export default {
		setup() {
			const inputValue = ref(null);

			return { inputValue };
		},
	};
</script>

<style></style>

만약에 위와 같이 그냥 v-bind로만 바인딩 해뒀다면

input 태그의 변화에 따라 변화시킬 수 없음

단방향 바인딩

만약에 이런식으로 변화시키고 싶다면

메서드를 호출해서 이벤트 시 변화될 수 있도록 만들면 될 것임 (event강의 자료를 참고할 것)

그러나

<input type="text" v-model="inputValue" />

위와 같이 사용하여 v-model 을 사용하면

양방향 바인딩이 가능하다.

<h2>textarea</h2>
<textarea v-model="textareaValue"></textarea>
<div>{{ textareaValue }}</div>

위와 같이 사용하여 textarea에서도 사용할 수 있다.

html이 무엇이냐에 따라서 이벤트를 다르게 사용한다.

checkbox 나 라디오 : change 이벤트 select; 태그도 change

<h2>checkbox</h2>
<label for="checkbox"> {{ checkboxValue }}</label>
<input id="checkbox" type="checkbox" v-model="checkboxValue" />

<h2>radio</h2>
<label>
	<input type="radio" name="text" value="O" v-model="radioValue" /> O형
</label>
<label>
	<input type="radio" name="text" value="A" v-model="radioValue" /> A형
</label>
<label>
	<input type="radio" name="text" value="AB" v-model="radioValue" /> AB형
</label>

<div> {{ radioValue }} </div>

위와 같이 하면 checkbox, radio 에 대한 양방향 바인딩을 볼 수 있음

select 태그도 실습

<h2>select</h2>
<select v-model="selectValue">
	<option value="html">html</option>
	<option value="javascript">javascript</option>
	<option value="vue">vue</option>
</select>
<div>{{ selectValue }}</div>

위와 같이 하면 양방향 바인딩이 가능함을 볼 수 있다

checkbox 의 경우에 …

<input
	id="checkbox"
	type="checkbox"
	v-model="checkboxValue"
	true-value="Yes"
	false-value="No"
/>

위와 같이 하면 yes, no 로 바인딩할 수 있다.

v-model 의 수식어

.lazy

보통 input value 는 타이핑 되었을 때마다 동기화 됨.

그러나 lazy를 사용하면

v-modle.lazy 이렇게하면

focus 가 떨어졌을 때 (blur) 일 때 동기화가 된다.

.number

기본적으로 우리는 문자열 형태로 받게 되는데

숫자형으로 받고 싶다면

v-model.number

.trim

앞뒤 공백을 제거해주는 애임.