Vue implementiert einfache Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der einfachen Rechnerfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Funktion: Addieren, Subtrahieren, Multiplizieren und Dividieren der Werte in den beiden Eingabefeldern

Verwendete Wissenspunkte:

1. Zweiwegebindung von V-Modell-Daten

2. .number wird in eine Zahl umgewandelt

3.@click Klickereignis

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
    //Wählen Sie Ihren eigenen Vue-Speicherort <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </Kopf>
 <Text>
  <div id="box">
   <!-- Wandeln Sie den ersten Wert in eine Zahl um -->
   <input Typ="Nummer" v-Modell.Nummer="Nummer1"/>
   
   <v-Modell auswählen="str">
    <optionswert="+">+</option>
    <Optionswert="-">-</Option>
    <Optionswert="*">*</Option>
    <optionswert="/">/</option>
   </Auswählen>
   <input Typ="Nummer" v-Modell.Nummer="Nummer2"/>
   <!-- Klicken Sie auf das Gleichheitszeichen, um den Inhalt der Cal-Funktion auszuführen-->
   <Schaltflächentyp="Schaltfläche" @click="calc">=</Schaltfläche>
   <!-- Ergebnis ausgeben -->
   <Eingabetyp="Text"/ v-Modell="num3">
  </div>
 </body>
 <Skripttyp="text/javascript">
  var vm = neuer Vue({
   el:"#box",
   Daten:{
    // Der Anfangswert im Eingabefeld num1: 0,
     Zahl2:0,
     Zahl3:0,
     str:'+'
    
   },
   Methoden:{
    berechnen(){
     wenn(dies.str=="+"){
      dies.num3=diese.num1+diese.num2
     }sonst wenn(dies.str=="-"){
      dies.num3=dies.num1-dies.num2
     }sonst wenn(dies.str=="*"){
      dies.num3=diese.num1*diese.num2
     }sonst wenn(dies.str=="/"){
      dies.num3=diese.num1/diese.num2
     }
    }
   
   }
   
  })
 </Skript>
</html>

Ergebnis:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vollständiges Beispiel einer von Vue.js implementierten Rechnerfunktion
Implementierung eines einfachen Rechners mit Vue
Beispiel einer klassischen Taschenrechner-/wissenschaftlichen Taschenrechnerfunktion, implementiert durch vue.js
Vue.js implementiert Preisrechnerfunktion
Vue implementiert einen einfachen Additionsrechner
Vue implementiert Rechnerfunktion
Vue implementiert einen einfachen Rechner
Vue.js implementiert eine einfache Taschenrechnerfunktion
Vue implementiert mobilen Rechner
Vue.js implementiert einen dreidimensionalen Rechner

<<: Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts

>>: Beispielcode für horizontalen Linienstil „hr“