[Vue] v-model 문법: 사용자의 입력값 받기

사용자의 입력 값 받기

 

사용자의 입력값 받는 법 1

$event.target.value 사용하여 받기

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

사용자가 <input> 태그 안에 입력할 때마다 그 값을 month 변수에 저장됨

• <input> 값은 모두 문자열(String) 자료형으로 저장됨

 

사용자의 입력값 받는 법 2 

v-model 문법을 사용하여 받기

<input v-model="month">

 

v-model 문법을 사용하기 위해서는 해당 변수를 데이터에 저장해둬야 함 (아래 코드 참조)

<script>
export default {
  data() {
    return {
      month: 1 // 사용자 입력과 연결될 데이터 속성
    };
  }
}
</script>

 

• 입력값의 자료형이 숫자면 초기값도 숫자로, 문자면 초기값도 문자로 만들어줘야함

 

이해를 돕기 위한 예시

  data() {
    return {
      month: 1 // 자료형이 숫자면 숫자로 세팅
      month: '' // 자료형이 문자면 문자로 세팅
    };