Vue.js) v-model 수식어

1. v-model 수식어

Vue.js에서 v-model 수식어는 폼 입력 요소와 데이터 모델 간의 바인딩을 커스터마이징 하는 데 사용됩니다. 이를 통해 다양한 입력 타입에 대한 특별한 동작을 지정할 수 있습니다. 주요 수식어는 lazy, number, trim 이 있습니다.

 

2. lazy

• lazy 수식어를 사용하면 변경 이벤트 (change event)가 발생할 때만 데이터가 업데이트됩니다. 사용자가 입력을 마친 후에만 데이터가 업데이트되도록 합니다.

<template>
	<h1>
		{{ msg }}
	</h1>
	<input type="text" v-bind:value="msg" @change="msg = $event.target.value" />
	<input type="text" v-model.lazy="msg" />
</template>

<script>
export default {
	data() {
		return {
			msg: 'Hello world!',
		};
	},
};
</script>

change 이벤트와 .lazy 수식어를 입력하면 input 필드에 변화가 있을 시 즉각적인 업데이트가 되지 않고 엔터나 탭을 누르면 업데이트됩니다.

 

3. number

• number 수식어는 입력 값을 자동으로 숫자로 변환합니다. 사용자가 입력한 값이 숫자가 아니면 'NaN'으로 변환됩니다. 주로 숫자 입력 필드에 사용됩니다.

<template>
	<h3>.num 미적용</h3>
	<input type="text" v-model="num" />
	<h3>.num 적용</h3>
	<input type="text" v-model.number="num" />
</template>

<script>
export default {
	data() {
		return {
			// msg: 'Hello world!',
			num: 123,
		};
	},
	watch: {
		num() {
			if (typeof this.num == 'string') {
				console.log('.num 미적용한 value 타입은:', typeof this.num);
			} else {
				console.log('.num 적용한 value 타입은:', typeof this.num);
			}
		},
	},
};
</script>

watch 속성으로 num 값의 변화가 일어날 때마다 console 창에 해당 값의 타입을 출력하는 코드입니다. 위와 같이. num을 적용한 부분은 숫자를 입력하면 number 타입으로 출력되고 미적용한 부분은 string으로 출력됨을 알 수 있습니다.

 

4. trim

• trim 수식어는 입력 값에서 양쪽 공백을 자동으로 제거합니다. 공백을 포함하지 않은 깨끗한 문자열을 얻는 데 유용합니다.

<template>
	<h3>.trim 미적용</h3>
	<input type="text" v-model="msg" />
	<h3>.trim 적용</h3>
	<input type="text" v-model.trim="msg" />
</template>

<script>
export default {
	data() {
		return {
			msg: 'Hello world!',
		};
	},
	watch: {
		msg() {
			console.log(this.msg);
		},
	},
};
</script>

trim 미적용한 입력 필드에는 띄어쓰기를 하면 watch에서 msg의 변화를 감시하여 console 출력이 되지만 trim 적용한 것은 trim수식어로 공백이 들어가도 변화가 이루어지지 않기 때문에 console창에 출력이 안됨을 알 수 있습니다.

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%88%98%EC%8B%9D%EC%96%B4