Vue 사용자 input받는 법 v-model

 

<input>에 뭔가 입력하고 기능을 만들 수 있다.

 

1. <input>에 유저가 입력한 내용을 data(){} 안에 저장하는 법

month 데이터에 $event.target.value를 작성하면  <input>에 입력한 값을 가져올 수 있다. 

( $event는 js에서 e.target의 e랑 똑같은 의미 .)

<template>
  //생략
  <input @input="month = $event.target.value"> // @input, @click, @change 이벤트핸들러
</template>
<script>
export default {
  data(){
    return {
      month : 0 //초기값, input에 입력되는 데이터 여기에 저장
    }
  }
}
</script>

 

축약해서 편하게 쓸수 있다.

v-model="데이터이름" 쓰면, 데이터에 사용자가 입력한 값을 저장한다 .

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

<input v-model="month">

 

2. 데이터바인딩해서 input에 입력되는 데이터를 출력한다.

<template>
 <div>
  <input @input="month = $event.target.value"> 
  <p>{{month}}개월 선택함 : {{원룸들[누른거].price * month}}만원</p>
 </div>
</template>

 

3. input에 입력한 데이터는 '문자자료형'으로 저장된다. 숫자자료형을 정해준다.

v-model.number="month"

 

참고)  v-model은 <input>, <textarea>, <select> 에도 적용 가능하다

<input v-model="month" /> 
<textarea v-model="month" />
<select v-model="month" />​