Vue.js 폼 입력 바인딩 / 단방향, 양방향 / v-model

 

단방향 데이터 바인딩

이때는 폼에서 Hello World의 값을 달리 적어도 실제 msg에 할당된 데이터는 갱신되지 않는다. 

<input
  type="text"
  :value="msg" />
<h1>{{ msg }}</h1>

return {
 msg: 'Hello World'
}

 

양방향 데이터 바인딩

 

input태그의 value로 바로 연결되는 handler를 사용하기 때문에 양방향 데이터 바인딩이 완성된다.

@input="handler"

methods: {
  handler(e) {
    this.masg = e.target.value
  }
}

 

vue.js속성으로 표현

:value="msg"
@input="msg = $e.target.value"

 

v-model

더 간략하게 v-model을 사용해보자.

<input
  type="text"
  v-model="msg" />

 

주의사항

한글은 완성된 글자로 나타나야 반응하므로 v-model를 사용하면 한 박자 늦게 동작하는 것처럼 보인다. 한글은 단방향 연결과 input디렉티브 형태로 사용하는 것이 적합하다.

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

 

v-model 수식어

change이벤트와 lazy

값의 변경이 모두 완료되면 동작하는 수식어

(폼 입력창에서 Enter나 Tab, 폼 바깥을 클릭했을 때 비로소 값이 갱신된다.)

:value="msg"
@change="msg = $e.target.value"

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

 

number

데이터의 타입을 숫자로 변경

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

 

trim

빈 공간을 제거

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