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:

Detaillierte Erkundung von vuex 2.0 und Erstellen einer Notizblockanwendung mit vuejs 2.0 + vuex 2.0
Beispiel eines lokalen Notizblocks basierend auf vue2.0+vuex+localStorage
Vue-Implementierung des Notizblockgehäuses
Vue implementiert einen einfachen Notizblock
Vue implementiert eine kleine Notizblockfunktion
Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
Detaillierte Erklärung des Vue Notepad-Beispiels
Vue implementiert Notizblockfunktion
Erstellung eines Vue-CLI- und Webpack-Notizblockprojekts
Vuex implementiert Notizblockfunktion

<<: Druid-Verbindungspool mit niedriger Version + MySQL-Treiber 8.0 führt zu Thread-Blockierungen und Leistungseinschränkungen

>>: Im A-Tag befinden sich Text und Bilder. Wie kann ich den Text ausblenden und nur das Bild anzeigen?

Das WeChat-Applet verwendet die Videoplayer-Videokomponente

Vue implementiert eine einfache Notizblockfunktion

Das WeChat-Applet verwendet die Videoplayer-Videokomponente

Beispiel zum Entfernen eines JSON-Backslashs in PHP

Erläuterung zu JavaScript-Anti-Shake und -Throttling

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18

Das WeChat-Applet implementiert das Scrollen von Text

So konvertieren Sie eine Spalte mit durch Kommas getrennten Werten in Spalten in MySQL

Eine kurze Einführung in die Gesamtstruktur von Tomcat

Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets

CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch

Artikel empfehlen

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen

Detaillierte Erklärung zur Verwendung der Vue-Nummernschild-Eingabekomponente

Spezifische Verwendung globaler Variablen von node.js

Anfänger verstehen das MySQL-Deadlock-Problem anhand des Quellcodes

Facebooks nahezu perfekte Neugestaltung aller Internetdienste

Einführung von ECharts in das Vue-Projekt

Detaillierte Beschreibung allgemeiner Ereignisse und Methoden von HTML-Text

Detaillierte Erklärung des VUE-Reaktionsprinzips

So stellen Sie einen Code-Server mit Docker bereit

Detaillierte Untersuchung, ob bei der MySQL-Fuzzy-Abfrage zwischen Groß- und Kleinschreibung unterschieden wird

Implementierung der Nginx-Konfiguration des lokalen Image-Servers

Eine kurze Einführung in die einfache Verwendung der CentOS7-Firewall und offener Ports

Detaillierte Erklärung der sieben Datentypen in JavaScript

Beispiel zum Erstellen eines MySQL-Clusters mit Docker