[Vue] @input, @change, v-model

@input

사용자가 해당 input에 입력할 때마다 스크립트가 실행된다.

<input @input="">

@change=

사용자가 해당 input에 값을 입력하고 커서를 다른 곳에 옮겼을 때 실행된다.

<input @change="">

사용자가 input에 입력한 값을 ‘month’ 데이터에 반영하기

vue에서 $event 는 vanilla JS의 함수 파라미터 e와 같다.

<input @input="$event">
document.addEventListener("click", function(e){ });

• $event.target : 현재 이벤트가 일어나고 있는 요소를 뜻한다.
• $event.target.value : 현재 이벤트가 일어나고 있는 요소의 값

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

<script>
export default {
  name: 'ModalDetail',
  data(){
    return {
      month: 1,
    }
  },
}
</script>

사용자가 input에 입력한 데이터는 String이다.

예제

<template>
  <div class="modal_wrap black-bg" v-if="모달창열렸니==1">
    <div class="white-bg">
      <img :src="원룸들[누른거].image" class="room-img">
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>{{ 원룸들[누른거].content }}</p>
      <div>개월 수 : <input type="text" @input="month = $event.target.value"></div>
      <p>[{{month}}개월 선택] {{ 원룸들[누른거].price * month }}원</p>
      <button @click="closeModal">닫기</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModalDetail',
  data(){
    return {
      month: 1,
    }
  },
  props: {
    원룸들: Object, // Number, String, Array
    누른거: Number,
    모달창열렸니: Number,
  },
  methods: {
    closeModal(){
      this.$emit('closeModal');
    }
  }
}
</script>

v-model

input, textarea, select 등 모든 입력받는 form요소에 사용할 수 있다.

<!-- <input type="text" @input="month = $event.target.value"> -->
<input type="text" v-model="month">


<!-- 문자 데이터를 숫자로 받고 싶을 때 -->
<input type="text" v-model.number="month">

여기에 입력한 데이터를 밑에 data에 저장하라는 약어

<textarea v-model="month"></textarea>

<select v-model="month">
	<option value="1"></option>
	<option value="2"></option>
</select>

<input type="checkbox" v-model="month">

다양한 form요소에 사용할 수 있다.
data의 초기값과 입력받은 데이터의 값이 동일해야 한다.