<template>
<div id="app">
<h1>.lazy : 인풋에 포커스가 아웃될때 데이터가 갱신됨</h1>
<h1>{{msg}}</h1>
<input type="text" v-model.lazy="msg">
<h1>.number : 사용자 입력이 자동으로 숫자로 형변환 됨</h1>
<h1>{{num}}</h1>
<input type="text" v-model.number="num">
<h1>.trim : 사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거</h1>
<h1>{{msg2}}</h1>
<input type="text" v-model.trim="msg2">
</div>
</template>
<script>
export default {
data(){
return{
msg:'Hello',
num:123,
msg2:'Hello2'
}
},
watch: {
num(){
console.log(typeof this.num)
},
msg2(){
console.log(this.msg2)
}
}
}
</script>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.