Vue implementiert eine einfache Notizblockfunktion
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung der einfachen Notizblockfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Vorschaubild:
Die Funktionen sind wie folgt: (1) Geben Sie die Aufgabe ein und drücken Sie die Eingabetaste, um sie der Aufgabenliste hinzuzufügen (doppelte Aufgaben können nicht eingegeben werden). (2) Klicken Sie auf Löschen, um die entsprechende Aufgabe zu löschen. (3) Klicken Sie auf „Löschen“ und alle Aufgaben werden gelöscht. (4) Die Gesamtzahl der Aufgaben wird synchron in der unteren linken Ecke angezeigt Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Notizblock</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
#todoapp {
Breite: 600px;
Hintergrundfarbe: rgba (19, 161, 114, 0,63);
Schriftfamilie: serifenlos;
}
.header>h1 {
Polsterung: 20px 0;
Textausrichtung: zentriert;
Schriftgröße: 40px;
Farbe: weißer Rauch;
}
.neueAufgabe {
Anzeige: Block;
Breite: 500px;
Höhe: 50px;
Zeilenhöhe: 50px;
Polsterung links: 10px;
Rand: 0 automatisch;
Schriftgröße: 20px;
Gliederung: keine;
Rand: keiner;
}
.todolist li {
Höhe: 30px;
Zeilenhöhe: 30px;
Polsterung links: 15px;
Rand: 10px 0;
Schriftgröße: 25px;
Farbe: weiß;
}
.todolist .item {
Rand links: 15px;
}
.zerstören,
.klar {
Breite: 50px;
Höhe: 30px;
schweben: rechts;
Farbe: weiß;
Hintergrundfarbe: transparent;
Rand: keiner;
Schriftgröße: 20px;
}
.Fußzeile {
Breite: 600px;
Höhe: 30px;
Polsterung: 10px 0;
vertikale Ausrichtung: Mitte;
}
.footer p {
Anzeige: Inline-Block;
Polsterung links: 15px;
Farbe: weiß;
Schriftgröße: 20px;
}
</Stil>
</Kopf>
<Text>
<Abschnitts-ID="todoapp">
<header Klasse="header">
<h1>Notizblock</h1>
<input type="text" v-model="newItem" class="newTask" placeholder="Bitte geben Sie die Aufgabe ein" @keyup.enter="add">
</header>
<Abschnitt>
<ul Klasse="Aufgabenliste">
<li v-for="(Element, Index) in Liste">
<div>
<span>{{ index + 1 }}</span>
<label class="Artikel">{{ Artikel }}</label>
<button class="destroy" @click="del(index)">Löschen</button>
</div>
</li>
</ul>
</Abschnitt>
<Fußzeilenklasse="Fußzeile">
<p Klasse="Anzahl">
Elemente: {{ list.length }}
</p>
<button class="clear" @click="clear" v-show="list.length != 0">Löschen</button>
</Fußzeile>
</Abschnitt>
<script src="./vue.js"></script>
<Skript>
const app = new Vue({
el: "#todoapp",
Daten: {
Liste: [],
neuesElement: ""
},
Methoden: {
hinzufügen() {
wenn (dieses.neueElement == "") {
zurückkehren;
}
anders {
wenn (!diese.Liste.enthält(dieses.neueElement)) {
diese.Liste.push(dieses.neueElement);
dieses.neuesItem = "";
}
anders {
alert("Keine doppelten Ereignisse hinzufügen!");
dieses.neuesItem = "";
}
}
},
del(index) {
diese.Liste.splice(index, 1);
},
klar() {
diese.liste = [];
}
}
})
</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:
|
Artikel empfehlen
Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen
Vorwort Ich habe vor kurzem eine kleine Demo gesc...
JS realisiert die Berechnung des Gesamtpreises der Waren im Warenkorb
JS berechnet den Gesamtpreis der Waren im Warenko...
Detaillierte Erläuterung der perfekten Integrationslösung zwischen Serv-U FTP und AD
Ich habe mich beim Backend angemeldet, um die Lös...
Zusammenfassung der MySQL-Entwicklungsstandards und -Nutzungskenntnisse
1. Namenskonventionen 1. Datenbanknamen, Tabellen...
Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux
Dieser Artikel beschreibt, wie man den https-Dien...
Analyse der Verwendung des MySQL-Datenbankbefehls „show processlist“
Wenn bei der tatsächlichen Projektentwicklung die...
Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)
Von: https://blog.csdn.net/qq_44761243/article/de...
MySql-Index verbessert die Abfragegeschwindigkeit allgemeine Methoden Codebeispiele
Verwenden Sie Indizes, um Abfragen zu beschleunig...
Verwenden Sie Meta-Tag-Code, um den 360 Dual-Core-Browser standardmäßig auf den Hochgeschwindigkeitsmodus statt auf den Kompatibilitätsmodus einzustellen
Eine Website verwendet viel HTML5 und CSS3 und ho...
Detaillierte Erläuterung der Redis-Persistenz, Master-Slave-Synchronisierung und Sentinel unter Linux
1.0 Redis-Persistenz Redis ist eine In-Memory-Dat...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
Vue: Wertübertragung zwischen Vater und Sohn, Wertübertragung zwischen Bruder und Kind, detaillierte Erläuterung
Inhaltsverzeichnis 1. Die übergeordnete Komponent...
Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
Führen Sie den folgenden Befehl aus, um einen Feh...
Zusammenfassung mehrerer APIs oder Tipps in HTML5, die Sie nicht verpassen sollten
In früheren Blogbeiträgen habe ich mich auf einige...
Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux
1. Offizielle Einführung grep ist ein häufig verw...