Vue implements simple calculator function

<div id="box">
  <table>
    <tr>
      <td><input type="button"value="del" @click="del()"></td>
      <td><input type="button"value="C" @click="clean()"></td>
      <td colspan="2"><input type="text" style="width: 200px" value="" v-model="rel"></td>

    </tr>
    <tr>
      <td><input type="button"value="7" @click="add('7')"></td>
      <td><input type="button"value="8" @click="add('8')"></td>
      <td><input type="button"value="9" @click="add('9')"></td>
      <td><input type="button"value="/" @click="add('/')"></td>
    </tr>


    <tr>
      <td><input type="button"value="4" @click="add('4')"></td>
      <td><input type="button"value="5" @click="add('5')"></td>
      <td><input type="button"value="6" @click="add('6')"></td>
      <td><input type="button"value="*" @click="add('*')"></td>
    </tr>

    <tr>
      <td><input type="button"value="1" @click="add('1')"></td>
      <td><input type="button"value="2" @click="add('2')"></td>
      <td><input type="button"value="3" @click="add('3')"></td>
      <td><input type="button"value="-" @click="add('-')"></td>
    </tr>

    <tr>
      <td><input type="button"value="0" @click="add('0')"></td>
      <td><input type="button"value="." @click="add('.')"></td>
      <td><input type="button"value="+" @click="add('+')"></td>
      <td><input type="button" value="=" v-on:click="result()" ></td>
    </tr>


  </table>
</div>

input{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 100px;
      text-align: center;
      border-radius: 10px;
      background-color: gainsboro;
      outline: none;
    }
    table{
      background-color: #b3d7ff;
      margin: auto;
}

var vm = new Vue({
    el:"#box",
    data:{
      rel:"",

    },
    methods:{
       add(index){//Here is the key binding method, concatenate the obtained value to the rel string this.rel +=index;
      },
      result(){
        this.rel = eval(this.rel);//Here is a calculation using the eval method this.rel = String(this.rel);//The purpose here is to display the number or string in the display bar. Only strings can be backspaced and reset to zero},
      del(){//This is the backspace operation. Use the substring method of the string to intercept. Each interception starts from the 0th one and goes to the one before the length, which is equivalent to backspace.
      this.rel = this.rel.substring(0,this.rel.length-1);
      },
      clean(){//This is the method of zeroing. The zeroing operation is achieved by assigning an empty string to the result. Of course, you can also use the deletion method, such as the unshift method or the pop method. It is easier to directly assign a value of empty.
         this.rel = "";
      }
    }
})