공부/vue

input 태그의 입력 값은 문자열

silver18 2020. 5. 24. 15:54
<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" />