사용자 input받기(v-model)

input태그에도 @~ 이런 식으로 이벤트 리스너를 달 수 있다.

<input @input="" type="text">

이렇게, @input="내용" 이러면 입력할 때마다 뭐 실행해주고,

@change="내용" 이러면 다 입력하고 커서를 밖에 찍으면 실행해준다.

 

먼저 script태그 안에

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

데이터를 month라는 이름으로 기본값 1을 저장해주고,

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

month 라는 값에 $event.target.value를 적어주면 사용자가 입력한 값이 month에 저장된다. 여기서 $event는 js에서 e.target의 e와 같은 뜻이다.

 

그리고,

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

이런 식으로, 데이터바인딩을 해서 바로바로 몇개월인지 알 수 있다. 그리곤, price에 바로바로 곱해져 나오게 할 수 있다.

 

이를 축약한게, v-model이란 문법이다.

<input v-model="month">

이렇게, v-model="데이터이름" 쓰면, 데이터이름으로 사용자가 입력한 값을 박아준다.

 

마지막으로, 사용자가 input에 입력한 것은 초기값이 숫자여도 문자자료형으로 저장이 된다. 하지만, js는 곱셈은 자료형에 맞게 잘 되기 때문에 가능하지만 더하기는 그저 두개를 이어붙여준다. 따라서.

v-model.number="month"

이렇게, .number을 붙여주면 숫자자료형이 된다.