SOURCE

new Vue({
    el: '#app',
    data: {
        equation: '0',              // 显示在计算器上的表达式
        isDecimalAdded: false,      // 避免重复输入小数点
        isOperatorAdded: false,     // 避免重复输入运算符 + - * /
        isStarted: false            // 是否开始输入数字
    },

    methods: {
        // check if the character is + - * /
        isOperator(character) {
            return ['+', '-', '*', '/'].indexOf(character) >= 0
        },
        isNumber(character) {
            //return ['1', '2', '3', '4', '5', '7', '8', '8', '9', '0'].indexOf(character) >= 0
            return (character >= '0' && character <= '9')
        },
        // when pressed operators or numbers
        append (character) {
            if (this.isStarted) {                           // 已经输入了数字
                if (this.isNumber(character)) {             // 输入的是数字
                    this.equation += character
                } else if (character === '.') {             // 输入的是小数点儿
                    if (this.isDecimalAdded) {              // 已经有小数点儿了
                        reutrn;
                    } else {
                        this.equation += character
                        this.isDecimalAdded = true
                    }
                } else if (this.isOperator(character)) {    // 是操作符
                    this.isDecimalAdded = false
                    this.isStarted = false
                    if (this.isOperatorAdded) {             // 已经存在操作符了 则替换以前的操作符
                        this.equation = substr(this.equation, 0, this.equation.length - 1) + character
                    } else {                                // 没有操作符, 则加上操作符好了
                        this.equation += character
                        this.isOperatorAdded = true
                    }
                }
            } else {                                        // 没有输入数字, 则开始输入数字
                if (character === 0) {                      // 如果输入的是0, 则什么也不做
                    if (this.equation.substr(this.equation.length -1) === '0') { // 如果最后一个字符是0
                        if (this.isDecimalAdded) {
                            this.equation += '' + character
                        }
                        return
                    } else {
                        this.equation += '' + character
                    }

                } else if (character === '.') {             // 如果输入是的小数点
                    if (this.isDecimalAdded) {              // 如果小数点已经输入过了
                        return
                    } else {
                        this.equation += character
                        this.isDecimalAdded = true
                    }
                } else if (this.isNumber(character)) {      // 是数字
                    if (this.isDecimalAdded) {
                        this.equation += '' + character
                    } else {
                        if (this.equation.substr(this.equation.length - 1) === '0') { // 如果最后一个字符是0, 则把0 替换掉
                            this.equation = this.equation.substr(0, this.equation.length - 1) + character
                        } else {
                            this.equation += character
                        }
                    }
                    this.isStarted = true
                    this.isOperatorAdded = false
                    
                } else {
                    return
                }
            }
            return
        },
        // when pressed =
        calculate() {
            this.equation = eval(this.equation)
        },
        // when pressed + -
        calculateToggle() {
            this.equation = eval(this.equation) * -1
        },
        // when pressed %
        calculatePercentage() {
            this.equation = eval(this.equation) / 100
        },
        // when pressed AC
        clear() {
            this.equation = '0'
            this.isDecimalAdded = false
            this.isOperatorAdded = false
            this.isStarted = false
        }
    }

});

<div id="app">
    <div class="calculator">
        <div class="result" style="grid-area: result">
            {{equation}}
        </div>
        <button style="grid-area: ac"         @click="clear">AC</button>
        <button style="grid-area: plus-minus" @click="calculateToggle">±</button>
        <button style="grid-area: percent"    @click="calculatePercentage">%</button>
        <button style="grid-area: add"        @click="append('+')">+</button>
        <button style="grid-area: subtract"   @click="append('-')">-</button>
        <button style="grid-area: multiply"   @click="append('*')">*</button>
        <button style="grid-area: divide"     @click="append('/')">/</button>
        <button style="grid-area: equal"      @click="calculate">=</button>
                
        <button style="grid-area: number-1"   @click="append(1)">1</button>
        <button style="grid-area: number-2"   @click="append(2)">2</button>
        <button style="grid-area: number-3"   @click="append(3)">3</button>
        <button style="grid-area: number-4"   @click="append(4)">4</button>
        <button style="grid-area: number-5"   @click="append(5)">5</button>
        <button style="grid-area: number-6"   @click="append(6)">6</button>
        <button style="grid-area: number-7"   @click="append(7)">7</button>
        <button style="grid-area: number-8"   @click="append(8)">8</button>
        <button style="grid-area: number-9"   @click="append(9)">9</button>
        <button style="grid-area: number-0"   @click="append(0)">0</button>
                
        <button style="grid-area: dot"        @click="append('.')">.</button> 
    </div>  
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eee;
}

.calculator {
    --button-width: 70px;
    --button-height: 70px;

    display: grid;
    grid-template-areas: 
        "result result result result"
        "ac plus-minus percent divide"
        "number-7 number-8 number-9 multiply"
        "number-4 number-5 number-6 subtract"
        "number-1 number-2 number-3 add"
        "number-0 number-0 dot equal";
    
    grid-template-columns: repeat(4, var(--button-width));
    
    grid-template-rows: repeat(6, var(--button-height));

    box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1)
              ,  8px  8px 16px -10px rgba(0, 0, 0, 1)
    ;

    padding: 24px;
    border-radius: 20px;
}

.calculator button {
    margin: 8px;
    padding: 0;
    border: 0;
    display: block;
    outline: none;
    border-radius: calc(var(--button-height) / 2); 
    font-size: 24px;
    font-family: monospace;
    font-weight: normal;
    color: #888;
    background: linear-gradient( 135deg
                               , rgba(230, 230, 230, 1) 0%
                               , rgba(246, 246, 246, 1) 100%
                               )
    ;
    box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1)
              ,  4px  4px 10px -8px rgba(0, 0, 0, .3)
    ;
}

.calculator button:active {
    box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset
              ,  4px  4px 10px -8px rgba(0, 0, 0, .3) inset
    ;
}

.result {
    text-align: right;
    line-height: var(--button-height);
    font-size: 48px;
    font-family: 'Times New Roman', Times, serif;
    padding: 0 20px;
    color: #888;
}