v-model 수식어 예제

@input="msg= $event.target.value"

input 태그에 입력하면 바로 msg데이터가 변하여 적용 되는 이벤트

 

v-model="msg" 

@input 이벤트와 마찬가지로 값을 입력하면 바로 데이터가 변경된다.

 

@change="msg= $event.target.value"

input 태그에 값을 입력한 후 엔터를 누르거나 포커스를 다른곳으로 옮기면 값이 변하는 이벤트

 

v-model.lazy="msg" 

@change 이벤트와 마찬가지로 입력후 포커스를 다른곳으로 이동하면 데이터가 변경된다.

 

v-model.number="msg"

데이터가 숫자형일때 선언해 주어야 숫자형으로 입력이 가능하다

 

v-model.trim="msg"

입력한 데이터의 앞뒤로 공백이 존재하면 제거하여 출력한다.

 

App.vue 코드

<template>
  <h1>데이터 결과 화면:  {{ msg }}</h1>

  <br />
  @input="msg= $event.target.value" :  &nbsp;&nbsp;
  <input
    type="text"
    :value="msg"
    @input="msg= $event.target.value" />
  <br />
  <br />
  @change="msg= $event.target.value" :  &nbsp;&nbsp;
  <input
    type="text"
    :value="msg"
    @change="msg= $event.target.value" />

  <br />
  <br />
  v-model.lazy="msg" :  &nbsp;&nbsp;
  <input
    type="text"
    v-model.lazy="msg" />
  <br />
  <br />
  v-model="msg" :  &nbsp;&nbsp;
  <input
    type="text"
    v-model="msg" />

  <br />
  <br />
  <!-- 숫자를 입력할 때에는 number를 붙여줘야 한다. 기본적으로는 String으로 된다. -->
  v-model.number="msg":  &nbsp;&nbsp;
  <input
    type="text"
    v-model.number="msg" />
  <br />
  <br />
  <!-- trim을 추가해 주면 입력한 값의 앞뒤로 공백을 제거해 준다. -->
  v-model.trim="msg":  &nbsp;&nbsp;
  <input
    type="text"
    v-model.trim="msg" />
</template>

<script>
export default {
  data() {
    return {
      // msg: 'Hello world!'
      msg: 123
    }
  },
  // 데이터가 변경될 때 해당 데이터의 정보를 확인
  watch: {
    msg() {
      console.log('msg(type): ' + typeof this.msg)
      console.log('msg: ' + this.msg)
    }
  }
}

</script>

v-model.number="msg"