<input type="text" @input="handler">
이렇게 가능. 이렇게 하면 input의 값이 바뀔때 마다 실행됨.
근데
methods:{
handler(e){
console.log(e.target.value);
}
}
이렇게 value 가져올려면 e.target.value로 해야 함.
여러 input의 이벤트에 반응하기 위해 공통적인 것만 대략적으로 가져온 듯.
e.value는 따로 안만들어 놨음.
<input type="text" :value="msg" @input="msg = $event.target.value">
이런 식으로도 가능
$event는 약속임. $e 이런 거 안됨.
<input type="text" v-model="msg">
이렇게 하면, 저 target의 value가 msg라는 변수와 연결됨.
data(){
return{
msg : 'Hello Vue Input'
}
}
이것과 연결됨.
<input type="checkbox" v-model="isChecked">
data(){
return{
isChecked:false
}
}
<input type="checkbox" v-model="isChecked" @input="handler">
data(){
return{
isChecked:false
}
}
methods:{
handler(e){
console.log(e.target.checked);
}
}
근데 v-model 좀 불편한 점이
한글은 아무래도 받침 이런 게 있다 보니까 한자가 완전히 완성, 그러니까 ㅁ 치고 띄어쓰기를 하든 엔터를 하든 여튼 다음단어로 넘어가야 인지가 됨.
v-model.lazy
v-model.number
v-model.trim
등 v-model에 대한 옵션이 3개 있다.
v-model.lazy는 입력을 다 했을 때.. 그러니까 입력 후 엔터를 치거나 포커스에서 벗어났을 때. 반영을 한다.
원래 v-model은 바로바로 반영하는 건데.
v-model.number는 숫자형으로 받는거임.
원래 html 모든 값 기본은 문자열로 소통되는데, v-model.number 하면 숫자로 받음
trim은 말 그대로 양옆 맨 끝 공백 지워주는 거임.