Vue实现简单的计算器

首先呢， 看了一下没找到带数字键盘的demo，于是乎自己写了个记录一下。

Vue+antd 组件 原理也超级简单，利用eval 计算 大佬轻点喷

<template>
  <div id="app" style="width: 800px">
    <a-row>
      <a-col>
        <a-input type="text" value="" v-model="rel"></a-input>
        <a-input type="button" value="del" @click="del()"> DEL</a-input>
        <a-input type="button" value="C" @click="clean()">C</a-input>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-input type="button" value="7" @click="add(7)">7</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="8" @click="add(8)">8</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="9" @click="add(9)">9</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="+" @click="add('+')">+</a-input>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-input type="button" value="4" @click="add(4)">4</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="5" @click="add(5)">5</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="6" @click="add(6)">6</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="-" @click="add('-')">-</a-input>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-input type="button" value="1" @click="add(1)">1</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="2" @click="add(2)">2</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="3" @click="add(3)">3</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="*" @click="add('*')">*</a-input>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-input type="button" value="0" @click="add(0)">0</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="." @click="add('.')">.</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="/" @click="add('/')">/</a-input>
      </a-col>
      <a-col :span="6">
        <a-input type="button" value="=" @click="result('=')">=</a-input>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rel: "",
    };
  },
  methods: {
    add(index) {
      this.rel += index;
    },
    del() {
      this.rel = this.rel.substring(0, this.rel.length - 1);
    },
    result() {
      this.rel = String(this.rel);
      this.rel = eval(this.rel);
    },
    clean() {
      this.rel = "";
    },
  },
};
</script>