<template>
  <div id="app">
    <h1>.lazy : 인풋에 포커스가 아웃될때 데이터가 갱신됨</h1>
    <h1>{{msg}}</h1>
    <input type="text" v-model.lazy="msg">
    <h1>.number : 사용자 입력이 자동으로 숫자로 형변환 됨</h1>
    <h1>{{num}}</h1>
    <input type="text" v-model.number="num"> 
    <h1>.trim : 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거</h1>
    <h1>{{msg2}}</h1>
    <input type="text" v-model.trim="msg2"> 
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'Hello',
      num:123,
      msg2:'Hello2'
    }
  },
  watch: {
    num(){
      console.log(typeof this.num)
    },
    msg2(){
      console.log(this.msg2)
    }
  }

}
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.