真正理解数据驱动(计算器案例)

<template>
  <div id="calculatorContainer">
    <a-input v-model="resultDisplay"></a-input>
    <a-input v-model="allDisplay"></a-input>
    <a-row>
      <a-col :span="6" v-for="item in numObj" :key="item">
        <a-button :type="item == '='?'primary':''" @click="clkNum(item)">{{item}}</a-button>
      </a-col>
      <a-col :span="6" v-for="item in optionObj" :key="item">
        <a-button @click="clkOption(item)">{{item}}</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentItem: '',
        num1: '',
        num2: '',
        numObj: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.', '='],
        optionObj: ['+', '-', '*', '/'],
        allDisplay: '',
        resultDisplay: '',
        option: '',
        optionFlag: false
      }
    },
    methods: {
      clkNum(item) {
        this.currentItem = item
        if (item !== '=') {
          this.allDisplay = this.allDisplay + item + ''
          if (this.optionFlag == true) {
            this.num2 = this.num2 + item + ''
          } else {
            this.num1 = this.num1 + item + ''
          }
        } else {
          //点击了等号
          // console.log(this.num1)
          this.resultDisplay = this.allDisplay + '='
          this.allDisplay = this.result
          //重置
          this.num1 = this.result
          this.optionFlag = false
          this.num2 = ''

        }

      },
      clkOption(item) {
        this.currentItem = item
        this.optionFlag = true
        this.option = item
        //把运算符加上去
        this.allDisplay = this.allDisplay + item
      }
    },
    computed: {
      result() {
        if (this.option == '+') {
          return Number(this.num1) + Number(this.num2)
        }
        if (this.option == '-') {
          return Number(this.num1) - Number(this.num2)
        }
        if (this.option == '*') {
          return Number(this.num1) * Number(this.num2)
        }
        if (this.option == '/') {
          return Number(this.num1) / Number(this.num2)
        }
      }
    },
    watch: {
      // currentItem: function (newVal, oldVal) {
      //   // console.log(Number(this.num2))
      //   if (newVal == '=') {
      //     this.resultDisplay = this.result
      //   }
      // }
    }
  }

</script>

<style lang="less" scoped>
  #calculatorContainer {
    width: 180px;
    padding: 20px 20px 0px;
    height: 500px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #ccc;

    .ant-btn {
      width: 32px;
    }
  }
</style>