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 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:
|
<<: SQL GROUP BY ausführliche Erklärung und einfaches Beispiel
>>: Detaillierte Erläuterung der Wissenspunkte zu Linux-Dateivorgängen
Artikel empfehlen
Detaillierte Schritte zum Bereitstellen von Microsoft SQL Server mit Docker
Inhaltsverzeichnis 1 Hintergrund 2 Erstellen Sie ...
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
So installieren Sie Jupyter in Docker auf CentOS und öffnen Ports
Inhaltsverzeichnis Installieren Sie Jupyter Docke...
Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.
Vorwort Im Grunde verwenden Programmierer am Arbe...
Tutorial zur Installation der Internetzugriffskonfiguration für Linux 7.2 auf einer virtuellen VMware-Maschine unter Win7
Installieren Sie die Linux7.2-Internetzugriffskon...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Detaillierte Erläuterung der MySQL-Benutzerrechteverwaltung
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
Detaillierte Erklärung der Komponentenkommunikation in React
Inhaltsverzeichnis Übergeordnete Komponente kommu...
Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation
Docker V1.13.1 auf centos7.3 mit yum installiert ...
So implementieren Sie die King of Glory-Personal-Ladeseite mit CSS3
Wer King of Glory gespielt hat, sollte mit der Wi...
Detaillierte Erklärung des JS-Browserspeichers
Inhaltsverzeichnis Einführung Plätzchen Was sind ...
React implementiert doppelten Schieberegler zum Querschieben
In diesem Artikel wird der spezifische Code für R...
Eine Fehlerbehebungserfahrung im CentOS-Docker-Bridge-Modus, bei dem auf den Host-Redis-Dienst nicht zugegriffen werden kann
Hintergrund: Ich habe bereits ein Projekt durchge...
So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver
So hosten Sie zwei oder mehr Sites auf dem belieb...
Implementierungsmethode für die Kapselung von Vue3-Navigationsleistenkomponenten
Kapseln Sie eine Navigationsleistenkomponente in ...