vue 문법[v-model]

폼 입력 바인딩

단반향 데이터 바인딩(연결)했다.

v-model

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
  <!-- 양방향 바인딩 v-model -->
  <h1>{{ checked }}</h1>
  <input
    type="checkbox"
    v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      msg:'Hello world!',
      checked:false
    }
  },
  // methods: {
  //   handler(event){
  //     console.log(event.target.value)
  //     this.msg=event.target.value
  //   }
  // }
}
</script>

한글을 입력하면 한박자 늦게 결과가 반영된다. 

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="msg = $event.target.value" />
  <!-- 양방향 바인딩 v-model -->
  <h1>{{ checked }}</h1>
  <input
    type="checkbox"
    v-model="checked" />
</template>

이렇게 작성하면 한글도 바로 반영될 수 있다.

v-model 수식어

@change

<template>
  <h1> {{ msg }}</h1>
  <input 
    type="text"
    :value="msg"
    @change="msg = $event.target.value" />
    <!-- chagne는 바로 반영되지 않고 tap, enter, input 밖에 클릭을 하면 반영된다. -->
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
}
</script>
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<template>
  <h1> {{ msg }}</h1>
  <input 
    type="text"
    v-model.lazy="msg" />
    <!-- chagne는 바로 반영되지 않고 tap, enter, input 밖에 클릭을 하면 반영된다. -->
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
}
</script>

입력이 완료하고 반영

<template>
  <h1> {{ msg }}</h1>
  <input 
    type="text"
    v-model.number="msg" />
    <!-- 입력하는 데이터가 지속적으로 숫자 데이터면 .number을 사용할 수 있다. -->
</template>

<script>
export default {
  data() {
    return {
      msg: 123
    }
  },
  watch:{
    msg(){
      console.log(typeof this.msg)
    }
  }
}
</script>

.number

<template>
  <h1> {{ msg }}</h1>
  <input 
    type="text"
    v-model.trim="msg" />
    <!-- trim은 띄어쓰기를 앞뒤로 삭제한다. -->
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  watch:{
    msg(){
      console.log(this.msg)  //띄어쓰기 제거 .trim()
    }
  }
}
</script>

.trim