vue 简易计算器

我真是闲得蛋疼。。。

<template>
  <div id="app">
    <div id="display">{{display}}</div>
    <div class="button" v-for="item in buttons" :key="item" @click="deal(item)">{{item}}</div>
  </div>
</template>

<script>

export default {
  name: 'app',
  data: function () {
    return {
      buttons: ['1', '2', '3', '+', '4', '5', '6','-', '7', '8','9', '*','=','c','.','/'],
      display: '0',
      numBefore: '0',
      symbol: ''
    }
  },
  methods: {
    deal: function(item) {
      const numCheck = /[0-9]/ // 检测是否为数字
      const methodCheck = /[+-*/]/ //检测是否为操作符号
      if(numCheck.test(item)){
        if(this.display === '0'){
          this.display = item     //如果是0的话，直接替换
        }else {
          this.display += item
        }
      }else if(methodCheck.test(item)){
        if(this.symbol !== ''){
          this.deal('=')
        }
        this.numBefore = this.display   //存入被操作数
        this.symbol = item              //符号
        this.display = '0'
      }else if(item === '='){
        console.log('is equal')
        switch (this.symbol) {
          case '+':
            this.display = (parseFloat(this.display) + parseFloat(this.numBefore)).toFixed(4)
            // 获得答案，保留4位小数
            break;
          case '-':
            this.display = (parseFloat(this.numBefore) - parseFloat(this.display)).toFixed(4)
            break;
          case '*':
            this.display = (parseFloat(this.display) * parseFloat(this.numBefore)).toFixed(4)
            break; 
          case '/':
            if(this.display === '0'){
              alert('0????')
              return
            }else{
              this.display = (parseFloat(this.numBefore) / parseFloat(this.display)).toFixed(4)
            }
            break;
          default:
            break;
        }
        this.symbol = ''      //计算完成，符号置空
        let dotLoc = this.display.indexOf('.')
        if(dotLoc !== '-1'){   //处理小数点后多余的0
          let count = 0
          for(let i = this.display.length-1; i > dotLoc; i--){
            if(this.display[i]=== '0'){
              count++
            }else{
              break;
            }
          }
          this.display = this.display.substr(0, this.display.length-count)
          if(this.display[this.display.length-1] === '.'){ //处理多余的小数点
            this.display = this.display.substr(0, this.display.length-1)
          }
        }
      }else if(item === '.'){
        if(this.display.indexOf('.')){
          this.display += item
        }
      }else if(item === 'c'){
        this.display = '0'
        this.numBefore = '0'
        this.symbol = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  display: grid;
   300px;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  grid-gap: 5px 5px;
  #display {
    // $h: 15px;
     calc(100% - 20px);
    height: 30px;
    grid-column: 1 / 5;
    border-radius: 4px;
    box-shadow: 1px 1px 3px gray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    text-align: right;
  }
  .button{
     50px;
    height: 30px;
    border: gray;
    border-radius: 4px;
    box-shadow: 1px 1px 3px gray;
    &:active {
      box-shadow: 1px 1px 3px rgb(255, 0, 0);
    }
  }
}
</style>