v-model
디렉티브를 사용하여 입력 폼 input과 textarea 엘리먼트를 양방향
데이터로 바인딩
할 수 있다.v-model
은 내부적으로 서로 다른 속성과 서로 다른 이벤트를 전송한다. value
속성과 input
이벤트를 사용한다checked
속성과 change
이벤트를 사용한다value
를 prop으로, change
를 이벤트로 사용한다 <body>
<div id="app">
<input type="text"
@input="bindMessage"
:value="message" />
<div>{{ message }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'Hello!'
},
methods: {
bindMessage(e) {
this.message = event.target.value
}
}
})
</script>
</body>
</html>
v-model
을 통해서 한글을 입력할 경우 하나의 글자가 완성되지 않으면 한박자 늦게 적용됨@input
, :value
을 통해 양방향 바인딩을 적용한다.lazy
: v-model
은 각 input 이벤트 후 입력과 데이터를 동기화한다. .lazy
수식어를 추가하여 change이벤트 이후에 동기화 할 수 있다.
.number
: 사용자 입력이 자동으로 숫자로 형변환 된다. HTML 입력 요소의 값은 항상 문자열(String)을 반영하기 때문에 종종 유용하다.
.trim
: 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거한다.