[Vue.js] 숫자 2개 받아서 계산하는 계산기

전에 랜덤으로 숫자 두개와 사칙연산을 뽑아 계산하는 것을 만들었다.

이걸 참고하여 계산기를 만들었다.

처음 화면

버튼 클릭하여 계산식 만드는 화면

'=' 버튼 클릭하여 계산된 결과 출력된 화면

버튼을 더 쉽게 만들수 있다고는 하는데

아직 익숙해지는 단계이다보니 쉬운 방법을 택했다.

    <div>
        <h2>2개 숫자 입력하여 계산하기</h2>
        <span>{{view}}</span>
        <!-- {{Calculation}} -->
        <br>
        <button id="num7" value="7" @click="selectButtonClick">7</button>
        <button id="num8" value="8" @click="selectButtonClick">8</button>
        <button id="num9" value="9" @click="selectButtonClick">9</button>
        <button id="division" @click="selectButtonClick">÷</button>
        <br>
        <button id="num4" value="4" @click="selectButtonClick">4</button>
        <button id="num5" value="5" @click="selectButtonClick">5</button>
        <button id="num6" value="6" @click="selectButtonClick">6</button>
        <button id="multiplication" @click="selectButtonClick">×</button>
        <br>
        <button id="num1" value="1" @click="selectButtonClick">1</button>
        <button id="num2" value="2" @click="selectButtonClick">2</button>
        <button id="num3" value="3" @click="selectButtonClick">3</button>
        <button id="minus" @click="selectButtonClick">-</button>
        <br>
        <button id="plu" @click="selectButtonClick">+</button>
        <button id="num0" value="0" @click="selectButtonClick">0</button>
        <button id="ac" @click="AllClear">AC</button>
        <button id="equal" @click="equalButtonClcik">=</button>
    </div>

버튼을 클릭해 계산식을 만든 후 '=(equal)' 버튼을 클릭하면 계산되도록 만들었다.

계산식은 문자열로 받아오게 된다.

이를 if문을 통해 어떤 계산식인지 구분하여 계산되도록 했다.

if(this.targetCont.indexOf('-') != -1){
                    this.int1 = Number(this.targetCont.split('-')[0]);
                    this.int2 = Number(this.targetCont.split('-')[1]);
                    
                    let minus = this.int1-this.int2;
                    console.log(minus);
                    this.view = minus;
                } else if(this.targetCont.indexOf('+') != -1) {
                    this.int1 = Number(this.targetCont.split('+')[0]);
                    this.int2 = Number(this.targetCont.split('+')[1]);
                    
                    let plus = this.int1+this.int2;
                    console.log(plus);
                    this.view = plus;
                } else if(this.targetCont.indexOf('×') != -1) {
                    this.int1 = Number(this.targetCont.split('×')[0]);
                    this.int2 = Number(this.targetCont.split('×')[1]);

                    let multiple = this.int1*this.int2;
                    console.log(multiple);
                    this.view = multiple;
                } else if(this.targetCont.indexOf('÷') != -1) {
                    this.int1 = Number(this.targetCont.split('÷')[0]);
                    this.int2 = Number(this.targetCont.split('÷')[1]);

                    let division = this.int1/this.int2;
                    console.log(division);
                    this.view = division;
                } else {
                    alert('다시 입력');
                }

 

전체 코드는 더보기 클릭

<template>
    <div>
        <h2>2개 숫자 입력하여 계산하기</h2>
        <span>{{view}}</span>
        <!-- {{Calculation}} -->
        <br>
        <button id="num7" value="7" @click="selectButtonClick">7</button>
        <button id="num8" value="8" @click="selectButtonClick">8</button>
        <button id="num9" value="9" @click="selectButtonClick">9</button>
        <button id="division" @click="selectButtonClick">÷</button>
        <br>
        <button id="num4" value="4" @click="selectButtonClick">4</button>
        <button id="num5" value="5" @click="selectButtonClick">5</button>
        <button id="num6" value="6" @click="selectButtonClick">6</button>
        <button id="multiplication" @click="selectButtonClick">×</button>
        <br>
        <button id="num1" value="1" @click="selectButtonClick">1</button>
        <button id="num2" value="2" @click="selectButtonClick">2</button>
        <button id="num3" value="3" @click="selectButtonClick">3</button>
        <button id="minus" @click="selectButtonClick">-</button>
        <br>
        <button id="plu" @click="selectButtonClick">+</button>
        <button id="num0" value="0" @click="selectButtonClick">0</button>
        <button id="ac" @click="AllClear">AC</button>
        <button id="equal" @click="equalButtonClcik">=</button>
    </div>
    
</template>
<script>
    export default {
        data() {
            return {
                    view: '',
                    int1: '',
                    int2: '',
                    targetCont: '',
                };
        },
        
        methods: {
            selectButtonClick(event) {
                // this.int += Number(document.getElementByContant("num").value);
                this.view = '';
                this.targetCont += event.currentTarget.textContent;
                this.view = this.targetCont;
                
                
            },
            equalButtonClcik() {
                this.view = '';
                if(this.targetCont.indexOf('-') != -1){
                    this.int1 = Number(this.targetCont.split('-')[0]);
                    this.int2 = Number(this.targetCont.split('-')[1]);
                    
                    let minus = this.int1-this.int2;
                    console.log(minus);
                    this.view = minus;
                } else if(this.targetCont.indexOf('+') != -1) {
                    this.int1 = Number(this.targetCont.split('+')[0]);
                    this.int2 = Number(this.targetCont.split('+')[1]);
                    
                    let plus = this.int1+this.int2;
                    console.log(plus);
                    this.view = plus;
                } else if(this.targetCont.indexOf('×') != -1) {
                    this.int1 = Number(this.targetCont.split('×')[0]);
                    this.int2 = Number(this.targetCont.split('×')[1]);

                    let multiple = this.int1*this.int2;
                    console.log(multiple);
                    this.view = multiple;
                } else if(this.targetCont.indexOf('÷') != -1) {
                    this.int1 = Number(this.targetCont.split('÷')[0]);
                    this.int2 = Number(this.targetCont.split('÷')[1]);

                    let division = this.int1/this.int2;
                    console.log(division);
                    this.view = division;
                } else {
                    alert('다시 입력');
                }

                //새로운 연산을 하기 위해 targetCont 초기화
                this.targetCont = '';
            },
            AllClear() {//AC버튼 클릭 후 모든 것이 초기화 되도록 함.
                this.view = '';
                this.targetCont = '';
            },
        }
    }
</script>
<style scoped>
    button {
        background: lightgray;
        font: arial;
        font-size: 20px;
        width: 120px;
        height: 100px;
    };
    button:hover {
        background: lightseagreen;
    }
</style>