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
JavaScript-Canvas zum Erzielen von Meteoreffekten
In diesem Artikel wird der spezifische Code für J...
Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux
Angenommen, es gibt zwei Linux-Server A und B, un...
Beispiel für die Bereitstellung von MySQL 8.0 mit Docker
1. Informationen zur Installation von Docker find...
Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann
Der Test wird in der Node.JS-Umgebung bestanden. ...
Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React
Inhaltsverzeichnis Vorwort Requisiten Kontext Zus...
Lernen Sie die Grundlagen von nginx
Inhaltsverzeichnis 1. Was ist nginx? 2. Was kann ...
Beschreibung und Verwendung der Tabellenattribute CellPad, CellSpace und Border bei der Webseitenerstellung
„Cellspacing“ ist der Abstand zwischen den Zellen ...
Analyse der Informationsarchitektur von Facebook
<br />Original: http://uicom.net/blog/?p=762...
React+Antd implementiert ein Beispiel zum Hinzufügen, Löschen und Ändern von Tabellen
Inhaltsverzeichnis Tabelle/index.js Tabelle/Model...
Detaillierte Erläuterung der Routing-Parameterübergabe und der komponentenübergreifenden Parameterübergabe in Vue
Routensprung dies.$router.push('/kurs'); ...
Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel
Inhaltsverzeichnis Einführung Spiegel-Repository ...
Installation, Konfiguration und Verwendung des Process Daemon Supervisors unter Linux
Supervisor ist ein sehr gutes Daemon-Verwaltungst...
Three.js realisiert den dynamischen 3D-Logoeffekt von Facebook Metaverse
Inhaltsverzeichnis Hintergrund Was ist das Metave...
So legen Sie die Speichergröße von Docker Tomcat fest
Wenn Sie Tomcat in Docker installieren, kann es b...
Beispielanalyse der Verwendung gemeinsam genutzter und exklusiver Sperren in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...