19. Vue - V model 수식어

1. v-model 수식어 

- 이번 포스팅에서는 이전 포스팅에서 배운 v-model 디렉티브의 수식어에 대해 알아보자.

 

 a) lazy (= change)

- input 요소에 입력이 끝나고 난 후, 엔터키를 누르거나 다른 요소를 클릭해서 focus 상태에서 벗어나면 적용된다. 

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

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

입력란이 focus 되어있는 상태에서는 데이터 갱신이 안됨

입력란에 focus가 없어지고 나서 갱신된 모습

 

- 위의 change 기능을 v-model 수식어로 사용하면 다음과 같이 표현할 수 있다.

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

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

 

b) number

- 사용자로부터 input요소를 통해 어떤 값을 입력받으면 해당 값은 String 타입이다.

- number를 사용하면 문자가 아닌 숫자가 입력되었을 때, 이를 number 타입으로 변환해주는 기능이다. 

 

 

c) trim

- input 요소의 입력값에 공백이 있는경우, 앞뒤의 공백을 없애주는 기능