Vue.js 문법 - v-model 수식어

 

v-model 수식어

 

• .lazy
• .number
• .trim

 

.lazy

 

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

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

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

 

코드 이해하기

- 양방향 데이터 바인딩 예제

- @change 이벤트는 값이 바뀌고 나서 동작, 완료가 되어야 동작

- v-model 에서는 @change 이벤트를 .lazy 수식어로 사용

 

.number

 

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

 

코드 이해하기

- input 요소에다가 입력 해야 하는 데이터가 숫자 데이터를 유지해야 한다면 .number 수식어를 사용

 

.trim

 

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

 

코드 이해하기

- 앞쪽과 뒤쪽의 공백을 항상 제거한 상태로 유지