Vue - watch를 이용한 입력 값 제한

vue.js를 이용하여 개발을 할때 watch를 이용하여 입력값을 제한하기가 매우 편리합니다.

 

특정범위만 입력되어야하는 경우 아래와 같이 사용하시면 됩니다.

 

예제로는 숫자만 입력입니다.

 

<input type="text" v-model="number" maxlength="10"> 


export default {
	data() {
		return{
			number : "",
		}
	},
	watch:{
		number : function(){
			return this.number = this.number.replace(/[^0-9]/g, '');  //정규식 사용
		}
	}
}

다음과 같은 방법으로 정규식을 이용하여 특정범위만 입력값을 받을 수 있습니다.

 

숫자만 입력의 경우 input 타입에 number 보다 text을 넣고 maxlength를 주는방식이 좋습니다. number 타입으로 할 경우 maxlength가 제대로 동작하지 않습니다.