티스토리 뷰
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>input 태그 입력 값</h1>
<div>
<label>a</label>
<input type="text" v-model="a" />
</div>
<div>
<label>b</label>
<input type="text" v-model="b" />
</div>
<hr />
<div class="total">
a 타입 : {{typeof a}}<br>
b 타입 : {{typeof b}}<br>
a * b : {{a * b}}<br>
a * b 타입 : {{typeof (a * b)}}<br>
a + b : {{a + b}}<br>
a + b 타입 : {{typeof (a + b)}}
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
a: 1,
b: 0,
},
})
</script>
</body>
</html>
위의 코드를 실행했을 때는
vue객체의 data에 있는 a와 b의 초기화 설정 때문에
각 변수와 덧셈을 typeof를 했을 때 결과 값이 number로 출력 된다.
그 후 input 태그에 숫자를 직접 입력하게 되면
각 변수와 덧셈 결과는 string 타입이 된다.
(+ 덧셈 결과도 문자열 덧셈으로 처리된다.)
자바스크립트에서 문자열 연산을 할 경우
<script>
let n1 = "6"
let n2 = "2";
console.log(n1 + n2);
console.log(n1 - n2);
console.log(n1 * n2);
console.log(n1 / n2);
</script>| 62 4 12 3 |
해결
let a = Number(a);
let a = parseInt(a);<input type="text" v-model.number="a" />'공부 > vue' 카테고리의 다른 글
| life cycle hook 메소드 (0) | 2020.06.27 |
|---|