[14] watcher

[14] watcher로 데이터 감시하는 법

month 라는 데이터가 변할 때마다 여기 있는 코드가 실행됨 => 이게 watcher 기능임.

 

 

 

 

함수명을 특이하게도 내가 감시하고 싶은 데이터명으로 작명하셔야합니다.

 

 

 

 

Modal.vue

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(){//month(a) 안에 파라미터 아무거나 작명해서 사용 가능
    //첫째는 변경될 값, 둘째는 변경전 값
      //month가 변경될 때 실행할 코드
    }
  }
}

 

 

 

 

 

숙제 : month라는 데이터 항목에
숫자가 아니라 문자가 들어오면 
"숫자만 입력하라"는 alert()창을 띄워주고
month의 초기값을 1로 다시 설정해봅시다.

watch: {
    month(a) {
      if (a >= 13) {
        alert("13이상 입력하지 마세요");
        this.month = 1;
      }
    },
  },

 

 

input에 숫자만 입력 받는 방법

참조 사이트: https://hianna.tistory.com/413

 

방법1) 'type'을 'number'로 지정하기

<input v-model.number="month" type="number" />

 

방법2) isNaN() 

watch : {
    month(a){
      if (isNaN(a) == true){
        alert('문자입력하지마라');
        this.month = 1;
      }
    },
 },

 

 

 

방법3) replace

watch:{
    month(val){
      return this.month = val.replace(/[^-\.0-9]/g,'');
    }
  },

 

 

방법4) 정규표현식

watch:{
    month(val){
      const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
      const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/; //한글, 영어를 감지
      if(reg.exec(val)!==null){ // 한글, 영어가 값으로 인식되면
      this.month = this.month.slice(0,-1);//글자 하나 입력할때마다 이 로직을 타서 글자를 자름
      }
      return this.month;
    }
  },

 

 

  정규표현식.exec(대상값)
  정규식 패턴에 맞는 문자열 탐색을 수행하는 메소드

주기적으로 도는군

 

 

대상배열.slice(앞에서, 뒤에서)