vue3 v-model / @input / @change / v-model.lazy / v-model.number / v-model.trim

v-model 

한글 입력시에는 방법이 다름

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
  <!-- 한글은 바로바로 안됨!!! 한글짜 입력해야지만 됨. 그래서 
       :value="msg" @input="msg = $event.target.value"
       를 사용해야한다! -->
  <h1>{{ checked }}</h1>
  <input
    type="checkbox"
    v-model="checked" />
</template>
 
<script>

export default {
  data(){
    return{
      msg: '헬로월드~!',
      checked: true
    }
  },
 
}
</script>

 

@input / @change / v-model.lazy / v-model.number / v-model.trim

<template>
  <!-- @input  / @change / v-model.lazy -->
  <h1>{{ msg }}</h1>

  <input
    type="text"
    v-model.trim="msg" />
  <!-- @input 양방향 : 한글 작성 
         @change : 값의 변경이 완료 된 후에 바뀜
         v-model.lazy 와 @change 동일-->
</template>

<script>
export default {
  data(){
    return{
      msg: 'helloworld' ,
    }
  },
  watch:{
    msg(){
      console.log(this.msg)
      // v-model.lazy   : 변경시 내용이 숫자여도 String 타입이 반환된다.
      // v-model.number : string값이 있으면 string, 숫자만 있으면 number로 반환된다 
      // this.msg.trim 을 하던가    //console.log 에 출력 됨
      // or input 태그에서 v-model.trim   //console.log에 출력 안됨. 항상 띄어쓰기가 제거된 상태로 유지됨!
    }
  }
}
  </script>