사용자의 input을 받는 법 (v-model), watcher로 데이터 감시(문자열막기)

애플코딩 - 뷰 강의

 

vue.js에서 $event는 javascript의 eventListener같은 존재이다. 클릭,체인지 등의 이벤트를 만들때에 이벤트요소 이다.

 

function안의 e와 같은 일을 한다고 보면 된다. 

$event.target.value 라고 입력하면, input에 입력한 값이 된다.

 

      <input @input=" month = $event.target.value"/>

이렇게하면 month에 값을 넣을 수 있다.

 

      <input v-model="month"/>

v-model은 input에 입력한 값을 month에 넣어주세요.라는 명령어 이다.(축약버전)

 

      <input v-model="month"/>
      <input type="checkbox" v-model="month"/>
      <textarea v-model="month"></textarea>
      <select v-model="month">
        <option>123</option>
        <option>1124</option>
        <option>11</option>
      </select>

다양한 방식으로 가능하다.

 

참고로 v-model로 들어가는 값은 모두 문자로 들어가게 된다.

 

<p>{{ month }} 개월 선택함 {{ 원룸들[누른거].price + month }} 원</p>

그래서 위 처럼 더하기를 할 경우에는 100+ 1 = 1001이 된다.

 

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

v-model.number를 사용하면 number타입으로 바꿔준다.

하지만 문자를 작성하면 문자로 또 들어간다..문자를 막을 수는 없음

 

watch 사용

 

    data(){
      return{
        month : 1,
      }
    },
    watch : {
      month(){
        
      }
    },

감시하고 싶은 state와 같은 이름의 함수를 만들어 준다.

month라는 데이터가 변경이 될 때마다 실행된다. (감시가 가능하다는 느낌 change와 비슷함)