[Vue.js] 섭씨 화씨 계산기 만들기

햅2024 2024. 12. 4. 21:42

event 함수 생성시 매개변수로 이벤트 객체 e도 함께 선언해주어야 한다.

<!DOCTYPE html>
<html >
<head>
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Celsius vs Fahrenheit</h1>
    <hr>
    <div id="calc">
        <!--text change 될 때 setC/setF 를 호출-->
        <input type="number" @change="setC" v-bind:value="C">섭씨 = 
        <input type="number" @change="setF" v-bind:value="F">화씨
    </div>
</body>
<script>
    var calc = new Vue({
        el: '#calc',
        data:{
            C: 0,
            F: 32
        },
        methods:{
            setC: function(e, c = e.target.value){
                console.log(e);
                this.C = c;
                this.F = c * (9 / 5) + 32;
            },
            setF: function(e,f){
                console.log(e);
                this.F = f;
                this.C = (f - 32) * (5 / 9);
            }
        }
    })
</script>
</html>