728x90
단방향 데이터 바인딩
이때는 폼에서 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" />
728x90
'FE' 카테고리의 다른 글
Vue.js Components와 Props, slot, provide, inject (0) | 2021.12.22 |
---|---|
Vue.js 이벤트 핸들링, 이벤트 수식어, 키 수식어 (0) | 2021.12.20 |
Vue.js 인스턴스와 라이프사이클 훅 (0) | 2021.12.20 |
Vue.js 반복문 리스트 렌더링 (0) | 2021.12.11 |
Vue.js 조건부 렌더링 v-if, v-show (0) | 2021.12.11 |