[Vue.js][Ch2][Vue 문법] v-model 수식어

@change

'값이 바뀌고 나서' 라는 의미.

(Ex. input 요소에서 tab 또는 enter 또는 커서가 해제되면 실행)

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

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

@change를 대신해 v-model.lazy를 사용할 수 있다.

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

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

데이터의 타입을 유지하려면(Ex. 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>

v-model에 number라는 수식어를 붙인다.

앞/뒤 공백을 제거하려면 .trim  수식어를 사용

<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>