v-model (lazy, number, trim)

v-model

vue에서 양방향 데이터 바인딩을 구현하는 디렉티브로 입력 폼 요소와 vue 인스턴스의 데이터를 바인딩할 수 있다.
바인딩하면 입력한 값을 자동으로 vue 인스턴스의 데이터에 반영하고,
vue 인스턴스의 데이터가 변경되면 입력 폼 요소에도 자동으로 반영된다.

v-model 디렉티브에는 Modifiers(수식어)가 있는데, 사용할 수 있는 수식어는 다음과 같다!

• .lazy
  입력이 될 때마다 바인딩이 되는 것이 아닌 입력이 끝난 후 바인딩을 하고 싶을때 사용할 수 있다.
  입력후 input에서 focusout될 때 변경된다.

<input type="text" v-model.lazy="message" />

• .number
  input에 숫자, 문자를 입력하면 값의 type은 string인데, 입력된 값의 type을 number로 변환해준다.
  문자가 들어왔다면 반환되지 않고 숫자만 입력했을 경우, 숫자로 시작됬을 경우에 변환된다.
  'hi' -> string
  '123' -> number
  '123hi' -> number (숫자뒤의 문자는 무시됨)

<input type="text" v-model.number="price" />

• .trim
  trim 메서드와 같이 입력값의 양 끝의 공백을 제거한다.

<input type="text" v-model.trim="message" />