Implementierung des Vue-Zählers
1. Implementierung des ZählersDazu einfach einen Zähler auf der Seite einbauen:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="../js/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<h3>Aktueller Zähler: {{counter}}</h3>
<button @click="Hinzufügen">+</button>
<button @click="Minuten">-</button>
</div>
<Skript>
const app = new Vue({
el: "#app",
Daten: {
Zähler: 0
},
Methoden: {
hinzufügen: Funktion () {
dieser.Zähler++;
},
Minuten: Funktion () {
dieser.Zähler--;
}
}
})
</Skript>
</body>
</html>
2. Ergebnisse erzielen Der endgültige Effekt wird im folgenden GIF angezeigt:
Dies ist das Ende dieses Artikels über die Implementierung des Vue-Zählers. Weitere relevante Inhalte zum Vue-Zähler finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: CSS Flex mehrere mehrspaltige Layouts
>>: So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)
Artikel empfehlen
Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux
1. Überprüfen Sie den Zeichensatz der Datenbank D...
Einführung in die CentOS7-Firewall und portbezogene Befehle
Inhaltsverzeichnis 1. Überprüfen Sie den aktuelle...
So implementieren Sie Funktions-Currying und -Decurrying in Javascript
Funktion Currying (schwarzes Fragezeichen)? ? ? C...
Detaillierte Erläuterung der Idee zur Implementierung dynamischer Effekte für die Änderung der Textfüllungsfarbe im Liedtext mit CSS3
Beim Abspielen von Musik werden die Liedtexte im ...
Der Unterschied zwischen shtml und html
Shtml und asp sind ähnlich. In Dateien mit dem Nam...
CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten
Wir verwenden animierte CSS3-Übergänge, um einen ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 (Windows 10 x64)
Was ich kürzlich gelernt habe, beinhaltet Kenntni...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...
Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website
1. Ersetzen Sie die Adresse Ihrer .js-Bibliotheks...
JS implementiert das Baidu-Suchfeld
In diesem Artikelbeispiel wird der spezifische JS...
Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0
Theoretisch entspricht der von MySQL verwendete S...
MySQL-Join-Abfrage (Left Join, Right Join, Inner Join)
1. Allgemeine Verbindungen für MySQL INNER JOIN (...
Hauptfunktionen von InnoDB - Cache einfügen, zweimal schreiben, adaptive Hash-Indexdetails
Zu den wichtigsten Funktionen der InnoDB-Speicher...
Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen
Letztes Mal haben wir über einige SQL-Abfrageopti...
Initialisieren Sie Ubuntu 16.04 in drei Minuten und stellen Sie Java-, Maven- und Docker-Umgebungen bereit
Fast-Linux-Projektadresse: https://gitee.com/uitc...