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?

Natives JS zum Erzielen eines coolen Paging-Effekts

Vue implementiert eine einfache Notizblockfunktion

Natives JS zum Erzielen eines coolen Paging-Effekts

So lösen Sie das Problem, dass das Softwarepaket bei der Installation von Software unter Linux nicht vorhanden ist

Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen

Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation

So implementieren Sie die Ein-Klick-Bereitstellung von NFS unter Linux

Installieren Sie MySQL 5.7 unter Ubuntu 18.04

Was bedeutet das n nach int(n) in MySQL?

Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode

Zusammenfassung der MySQL-Verbundindizes

Natives JS-objektorientiertes Tippspiel

Artikel empfehlen

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Neunundvierzig JavaScript-Tipps und Tricks

Bei der Installation von mysql8.0.15 winx64 unter Win10 und der Verbindung zum Server sind Probleme aufgetreten

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Detaillierte Erklärung der Truncate-Verwendung in MySQL

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

So implementieren Sie Funktions-Currying und -Decurrying in Javascript

Das Linux-System öffnet die Ports 3306, 8080 usw. zur Außenwelt. Detaillierte Erläuterung der Firewall-Einstellungen

Bedingtes Rendering von Vue (v-if und v-show)

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle

Klassischer MySQL-High-Level-/Befehlszeilenvorgang (schnell) (empfohlen)

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.

Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen