Vue implementiert einfache Rechnerfunktion

<div id="box">
  <Tabelle>
    <tr>
      <td><input type="button"value="del" @click="del()"></td>
      <td><input type="button"value="C" @click="clean()"></td>
      <td colspan="2"><input Typ="Text" Stil="Breite: 200px" Wert="" v-Modell="rel"></td>

    </tr>
    <tr>
      <td><input Typ="Schaltfläche"Wert="7" @click="add('7')"></td>
      <td><input Typ="Schaltfläche"Wert="8" @click="add('8')"></td>
      <td><input Typ="Schaltfläche"Wert="9" @click="add('9')"></td>
      <td><input Typ="Schaltfläche"Wert="/" @click="Hinzufügen('/')"></td>
    </tr>


    <tr>
      <td><input Typ="Schaltfläche"Wert="4" @click="Hinzufügen('4')"></td>
      <td><input Typ="Schaltfläche"Wert="5" @click="add('5')"></td>
      <td><input Typ="Schaltfläche"Wert="6" @click="add('6')"></td>
      <td><input Typ="Schaltfläche"Wert="*" @click="Hinzufügen('*')"></td>
    </tr>

    <tr>
      <td><input Typ="Schaltfläche"Wert="1" @click="Hinzufügen('1')"></td>
      <td><input Typ="Schaltfläche"Wert="2" @click="Hinzufügen('2')"></td>
      <td><input Typ="Schaltfläche"Wert="3" @click="Hinzufügen('3')"></td>
      <td><input Typ="Schaltfläche"Wert="-" @click="Hinzufügen('-')"></td>
    </tr>

    <tr>
      <td><input Typ="Schaltfläche"Wert="0" @click="Hinzufügen('0')"></td>
      <td><input Typ="Schaltfläche"Wert="." @click="Hinzufügen('.')"></td>
      <td><input Typ="Schaltfläche"Wert="+" @click="Hinzufügen('+')"></td>
      <td><input Typ="Schaltfläche" Wert="=" v-on:click="Ergebnis()" ></td>
    </tr>


  </Tabelle>
</div>

Eingang{
      Breite: 100px;
      Höhe: 100px;
      Rand: 1px tief schwarz;
      Zeilenhöhe: 100px;
      Textausrichtung: zentriert;
      Rahmenradius: 10px;
      Hintergrundfarbe: Gainsboro;
      Gliederung: keine;
    }
    Tisch{
      Hintergrundfarbe: #b3d7ff;
      Rand: automatisch;
}

var vm = neuer Vue({
    el:"#box",
    Daten:{
      rel:"",

    },
    Methoden:{
       add(index){//Hier ist die Methode zur Tastenbindung. Verketten Sie den erhaltenen Wert mit der Rel-Zeichenfolge this.rel +=index;
      },
      Ergebnis(){
        this.rel = eval(this.rel);//Hier ist eine Berechnung mit der eval-Methode this.rel = String(this.rel);//Der Zweck hier ist, die Zahl oder Zeichenfolge in der Anzeigeleiste anzuzeigen. Nur Zeichenfolgen können zurückgesetzt und auf Null gesetzt werden},
      del(){//Dies ist die Backspace-Operation. Verwenden Sie die Teilzeichenfolgenmethode der abzufangenden Zeichenfolge. Jede Abfangoperation beginnt bei der 0. und geht bis zur vor der Länge, was der Backspace-Operation entspricht.
      dies.rel = dies.rel.substring(0,diese.rel.length-1);
      },
      clean(){//Dies ist die Methode zum Nullsetzen. Die Nullsetzung wird erreicht, indem dem Ergebnis eine leere Zeichenfolge zugewiesen wird. Natürlich können Sie auch die Löschmethode verwenden, z. B. die Unshift-Methode oder die Pop-Methode. Es ist einfacher, direkt einen leeren Wert zuzuweisen.
         dies.rel = "";
      }
    }
})