728x90
[목표]
:
1. input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자
2. 콘솔에 나타나는 Number 와 String의 차이점을 살펴보자
3. v-model의 숨겨진 v-model.number, v-model.trim 에 대해서 알아보자
input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model="inputAge" ref="userAge"/>
</div>
타입은 Number
v-model, ref 각각 변수에 할당했다.
console에 찍어보자
<script>
export default{
data(){
return{
inputName: '',
inputAge: 0,
};
},
methods: {
submitData(){
console.log(this.inputName);
console.log(this.inputAge);
console.log(this.$refs.userAge.value);
this.inputName = '';
}
}
}
</script>
콘솔에 숫자는 파란색
문자는 검정색으로 나온다.
type이 number임에도
ref로 가져온 값은 String이다.
조심해야한다.
확실한 확인을 위해
숫자를 더해본다.
<script>
export default{
data(){
return{
inputName: '',
inputAge: 0,
};
},
methods: {
submitData(){
console.log(this.inputName);
console.log(this.inputAge + 10);
console.log(this.$refs.userAge.value + 10);
this.inputName = '';
}
}
}
</script>
v-model은 29 + 10 = 39가 되었고
ref는 29 + 10 = 2910이 되었다
v-model의 숨겨진 v-model.number, v-model.trim 에 대해서 알아보자
v-model.number => 숫자 타입 변환
v-model.trim => 받은 문자 앞 뒤 공백을 없애줌
'데일리 공부 기록' 카테고리의 다른 글
| hands on vue3 - component에서 수정된 값을 부모에서 받기 (1) | 2023.03.17 |
|---|---|
| hands on vue3 - 제공된 소스로 체크,라디오,드랍박스 값을 v-model로 구해보자 (0) | 2023.03.16 |
| hands on vue3 - 제공된 소스로 설문조사 유효성검사 만들기 연습문제 - 1 (0) | 2023.03.16 |
| hands on vue3 - 동적 component를 사용하기 위한 기술들 연습 (0) | 2023.03.15 |
| hands on vue3 - provide & inject 이용하여 resource 구현하기 (0) | 2023.03.15 |
