Vue+Element 計算器

效果：

<template>
  <div id="app">
    <!-- <div>{{m}}</div> -->
    <div>{{val}}</div>
    <div>
      <el-button @click="pd(item)" v-for="item in buttonList" :key = "item">{{item}}</el-button>
    </div>
    <!-- <div>
      <el-button v-for="n in 10" @click="result(n-1)" >{{n-1}}</el-button>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      visible: false,
      val: '',
      n: '',
      m: '',
      buttonList: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '-', '*', '/', '=', 'CE', 'C', '刪除', 'MR', 'M+']
    }
  },
  methods: {
    pd (p) {
      if (p === 'CE' || p === 'C') {
        this.ce();
      } else if (p === '刪除') {
        this.result('d');
      } else if (p === 'MR') {
        this.mr();
      } else if (p === 'M+') {
        this.madd();
      } else {
        this.result(p);
      }
    },
    result (p) {
      if (p >= '0' && p <= '9') {
        this.val += p;
      } else if (p === '=') {
        this.val = window.eval(this.val);
      } else if (p === 'd') {
        this.val = this.val.substr(0, this.val.length - 1);
      } else {
        if (this.val[this.val.length - 1] === '+' || this.val[this.val.length - 1] === '-' || this.val[this.val.length - 1] === '*' || this.val[this.val.length - 1] === '/') {
          this.val = this.val.substr(0, this.val.length - 1);
        }
        this.val += p;
      }
    },
    ce () {
      this.val = this.val.replace(this.val, '');
    },
    mr () {
      this.val = this.m;
    },
    madd () {
      this.m = Number(this.val) + Number(this.m);
    }
    // evil (fn) {
    //   var Fn = Function; // 一個變量指向Function，防止有些前端編譯工具報錯
    //   return new Fn('return ' + fn)();
    // }
  }
}
</script>