Vue implementiert einen einfachen Rechner

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung eines einfachen Rechners als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Fallanforderungen

Fallideen

1. Die Bindung der Werte A und B wird durch die v-Modell-Direktive realisiert
2. Binden Sie Ereignisse an die Berechnungsschaltflächen, um die Berechnungslogik zu implementieren
3. Binden Sie die Berechnungsergebnisse an die entsprechenden Positionen

Implementieren statischer Seiten

<div id='App'>
    <h1>Einfacher Rechner</h1>
    <div><span>Wert A:</span><span><input type="text" v-model='a'></span></div>
    <div><span>Wert B:</span><span type="text" v-model='b'></span></div>
    <div><button>Berechnen</button></div>
    <div><span>Berechnungsergebnisse</span><span></span></div>
</div>

Vue importieren

<script type="text/javascript" src="js/vue.js"></script>

Anweisungen für statische Seiten hinzufügen

<div id='App'>
    <h1>Einfacher Rechner</h1>
    <div><span>Wert A:</span>
      <span>
        <Eingabetyp="Text" v-Modell='a'>
      </span>
    </div>
    <div>
      <span>Wert B:</span>
      <span>
        <Eingabetyp="Text" v-Modell='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">Berechnen</button>
    </div>
    <div><span>Berechnungsergebnis</span><span v-text="result"></span></div>
</div>

Berechnungsfunktion festlegen

<Skripttyp="text/javascript">
    /* */
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        A: '',
        B: '',
        Ergebnis: ''
      },
      Methoden: {
        Griff: Funktion () {
          // Berechnungslogik implementieren this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
</Skript>

Endgültiger Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Einfacher Rechner</title>
</Kopf>

<Text>
  <div id='App'>
    <h1>Einfacher Rechner</h1>
    <div><span>Wert A:</span>
      <span>
        <Eingabetyp="Text" v-Modell='a'>
      </span>
    </div>
    <div>
      <span>Wert B:</span>
      <span>
        <Eingabetyp="Text" v-Modell='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">Berechnen</button>
    </div>
    <div><span>Berechnungsergebnis</span><span v-text="result"></span></div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <Skripttyp="text/javascript">
    /* */
    var vm = neuer Vue({
      el: "#app",
      Daten: {
        A: '',
        B: '',
        Ergebnis: ''
      },
      Methoden: {
        Griff: Funktion () {
          // Berechnungslogik implementieren this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </Skript>
</body>

</html>

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 implementiert einen einfachen Additionsrechner
Vue.js implementiert Preisrechnerfunktion
Vue implementiert Rechnerfunktion
Vue implementiert einen einfachen Rechner
Vue implementiert mobilen Rechner
Vue.js implementiert eine einfache Taschenrechnerfunktion
Vue implementiert einen einfachen Web-Rechner

<<: SQL GROUP BY ausführliche Erklärung und einfaches Beispiel

>>: Detaillierte Erläuterung der Wissenspunkte zu Linux-Dateivorgängen

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

Die CSS-Stilsteuerung zum Erreichen des Datensatzverlaufs des IE-Übermittlungsformulars und der Klick-Rückgabeinformationen ist weiterhin vorhanden

Es handelt sich hauptsächlich um ein CSS-Stilsteue...

Vue implementiert einen einfachen Rechner

Fallanforderungen

Fallideen

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)

Vue realisiert Preiskalendereffekt

So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder

Ideen und Codes zur Implementierung der Vuex-Datenpersistenz

Grundlegende Hinweise zu HTML (empfohlen)

Acht Beispiele, wie Vue Komponentenkommunikation implementiert

Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt

Problem mit der Iframe-QRC-Zuweisung (serverseitig)

Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten

Artikel empfehlen

JavaScript entfernt unnötige Eigenschaften eines Objekts

Einführung in die grundlegenden TypeScript-Typen

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Installations- und Konfigurationsmethode von Zabbix Agent auf der Linux-Plattform

Was Sie über die Transaktionsisolierung von msyql wissen müssen

Allgemeine Befehle für MySQL-Autorisierung, Start und Dienststart

Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen

Der Vue Axios Interceptor verwendet häufig die wiederholte Stornierung von Anforderungen

Die CSS-Stilsteuerung zum Erreichen des Datensatzverlaufs des IE-Übermittlungsformulars und der Klick-Rückgabeinformationen ist weiterhin vorhanden

Kennen Sie den Unterschied zwischen leerem Wert und Nullwert in MySQL

Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.

Schritte zum Kapseln der Karussellkomponente in vue3.0

Super detaillierte Schritte zur Installation von Zabbix3.0 auf Centos7

Umfassende Übersicht über die verschiedenen Abhörmethoden von Vue3.0

So zeigen Sie den Rahmen an, wenn td leer ist