v-model 수식어

@change

입력하는 동안이 아닌 입력하고 난 뒤 enter를 누르거나 blur가 해제되었을 때 등 입력을 하고 나서 바뀜

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" 
    @change="msg = $event.target.value" />
  <h1> {{ checked }}</h1>
</template>

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

v-model로는 어떻게 만들까?

lazy가 게으르다라는 뜻으로 v-model.lazy를 하면 게으르게 동작한다고 하여 엔터를 누르면 그 때 데이터가 바뀐다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.lazy="msg" />
  <h1> {{ checked }}</h1>
</template>

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

v-model.number

v-model로 바인딩 한 후 숫자를 입력하면 type이 string으로 나온다. 만약 값이 계속 숫자로 입력해야하는 값이면 v-model.number라는 수식어를 붙여 type이 number로 나오게 해준다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.number="msg" />
</template>

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

<style>

</style>

v-model.trim

trim은 공백을 지워주는 수식어로 띄어쓰기를 해도 값이 밀리지 않고 그대로 있다. 아래 예시의 경우 띄어쓰기를 주르륵 하고 다시 input 밖에 클릭을 하면 다시 돌아오는데, console에는 찍히지 않는다. 이 이유는 msg에 적힌 'hello world'와 입력된 값이 같기 때문에 아무런 변화가 없다고 생각하여 console 창에는 따로 찍히지 않는다. msg 자체에 변화를 주면 console에 찍힌다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.trim="msg" />
</template>

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

<style>

</style>