Vueはシンプルな計算機能を実装します

<div id="ボックス">
  <テーブル>
    <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>


  </テーブル>
</div>

入力{
      幅: 100ピクセル;
      高さ: 100px;
      境界線: 1px 黒一色;
      行の高さ: 100px;
      テキスト配置: 中央;
      境界線の半径: 10px;
      背景色: ゲインズボロ;
      アウトライン: なし;
    }
    テーブル{
      背景色: #b3d7ff;
      マージン: 自動;
}

var vm = 新しい Vue({
    el:"#ボックス",
    データ：{
      rel:"",

    },
    方法:{
       add(index){//これはキーバインディングメソッドで、取得した値を rel 文字列に連結します。this.rel +=index;
      },
      結果（）{
        this.rel = eval(this.rel);//ここでは eval メソッドを使用した計算です this.rel = String(this.rel);//ここでの目的は、表示バーに数値または文字列を表示することです。文字列のみバックスペースしてゼロにリセットできます},
      del(){//これはバックスペース操作です。インターセプトには文字列の部分文字列メソッドを使用します。インターセプトは0番目から始まり、長さの前まで進みます。これはバックスペースに相当します。
      this.rel = this.rel.substring(0,this.rel.length-1);
      },
      clean(){//これはゼロ化の方法です。ゼロ化操作は、結果に空の文字列を割り当てることによって実現されます。もちろん、unshiftメソッドやpopメソッドなどの削除メソッドを使用することもできます。空の値を直接割り当てる方が簡単です。
         this.rel = "";
      }
    }
})