Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung des Hinzufügens, Löschens und Änderns von lokalem Speicher zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Funktionalität: Die Eingabe wird der laufenden Liste hinzugefügt. Durch Doppelklicken wird die Funktion geändert. Klicken Sie auf die Esc-Taste, um abzubrechen, oder auf den vorherigen Inhalt. Klicken Sie auf „Eingabe“, um die Änderung erfolgreich abzuschließen. Die Änderung ist erfolgreich, wenn der Änderungsrahmen den Fokus verliert. Wenn die Schaltfläche ausgewählt ist, gelangt sie in die Liste der abgeschlossenen Vorgänge, und wenn sie nicht ausgewählt ist, gelangt sie in die Liste der laufenden Vorgänge. Klicken Sie auf „Löschen“, um die Zeile zu löschen. Die zuletzt hinzugefügten Dateien sind beim nächsten Öffnen des lokalen Speichers noch vorhanden.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
*{
Polsterung: 0; Rand: 0;
}
ul{
Listenstil: keiner;
}
li{
Breite: 220px;
Höhe: 40px;
Rand: 1px durchgezogener Gainsboro;
Rand oben: 4px;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: #6CE26C;
}
.del{
Rand rechts: 5px;
Rand: keiner;
Breite: 20px;
Höhe: 20px;
Hintergrundfarbe: #008200;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<!-- Vorangehende und nachfolgende Leerzeichen im Eingabeinhalt filtern-->
<!-- Veranstaltung eingeben -->
<input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
<!-- Anzahl der laufenden Vorgänge abrufen -->
<h3>In Bearbeitung{{undolist.length}}</h3>
<ul Klasse="Liste">
<!-- Den durchsuchten Inhalt anzeigen -->
<li class="item" v-for="Element in Undo-Liste" :key="item.name">
<div Klasse="">
<!-- Das Mehrfachauswahlfeld ist im deaktivierten Zustand „Falsch“ -->
<input type="checkbox" v-model="item.done" />
<!-- Der Standardstatus ist 0. Bei einem Doppelklick ist der Status 1 und der Inhalt wird tempEdit zugewiesen-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- Der Inhalt des Eingabefelds ist der Wert von tempEdit. Wenn state=1 ist, wird das Eingabefeld angezeigt.
Wenn Sie auf Esc klicken, wird der Status ausgeblendet und der Inhalt behält den ursprünglichen Wert ohne Änderungen bei.
Wenn der Status beim Drücken der Eingabetaste 0 ist, wird das Eingabefeld ausgeblendet und das geänderte tempEdit wird item.name zugewiesen.
Wenn der Status 0 ist und der Fokus verloren geht, wird das Eingabefeld ausgeblendet und das geänderte tempEdit wird item.name zugewiesen.
-->
<Eingabetyp="Text" v-Modell="tempEdit" v-Show="Artikel.Status==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit"
@blur="item.state=0;item.name=tempEdit"
/>
</div>
<!-- Löscht den Inhalt, wenn Sie auf Löschen klicken -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
<!-- Abgeschlossene Menge -->
<h3>Abgeschlossen {{doneList.length}}</h3>
<ul Klasse="Liste">
<!-- Den fertigen Inhalt durchlaufen und anzeigen-->
<li class="item" v-for="Element in erledigter Liste" :key="item.name">
<div Klasse="">
<!-- Das Mehrfachauswahlfeld befindet sich im ausgewählten True-Zustand -->
<input type="checkbox" v-model="item.done" />
<!-- Der Standardstatus ist 0. Bei einem Doppelklick ist der Status 1 und der Inhalt wird tempEdit zugewiesen-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- Der Inhalt des Eingabefelds ist der Wert von tempEdit. Wenn state=1 ist, wird das Eingabefeld angezeigt.
Wenn Sie auf Esc klicken, wird der Status ausgeblendet und der Inhalt behält den ursprünglichen Wert ohne Änderungen bei.
Wenn der Status beim Drücken der Eingabetaste 0 ist, wird das Eingabefeld ausgeblendet und das geänderte tempEdit wird item.name zugewiesen.
Wenn der Status 0 ist und der Fokus verloren geht, wird das Eingabefeld ausgeblendet und das geänderte tempEdit wird item.name zugewiesen.
-->
<Eingabetyp="Text" v-Modell="tempEdit" v-Show="Artikel.Status==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit;"
@blur="item.state=0;item.name=tempEdit;"
/>
</div>
<!-- Löscht den Inhalt, wenn Sie auf Löschen klicken -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<Skripttyp="text/javascript">
var vm = neuer Vue({
el:"#app",
Daten(){
zurückkehren {
// Liste Liste // getItem dient zum Abrufen der lokal gespeicherten Daten.
// || "[]" Wenn keine Array-Liste abgerufen werden kann, konvertieren Sie sie in eine leere Array-Liste: JSON.parse(localStorage.getItem("list")|| "[]"),
// Temporärer Datenspeicher temp:'',
// Temporärer Datenspeicherort für die Änderungsbox tempEdit:''
}
},
Methoden:{
// additem() hinzufügen{
// Zurückkehren, wenn das Textfeld leer ist if(this.temp===""){return;}
// Nach hinten hinzufügen this.list.push({
Name:dieses.temp,
fertig:falsch,
Zustand: 0
})
// Löschen Sie das temporäre Feld this.temp="";
},
// löschen removeitem(item){
// Popup-Fenster var flag = window.confirm ("Möchten Sie wirklich löschen?");
wenn(Flagge){
// Finde den Indexwert des Elements, das die Bedingungen erfüllt var ind=this.list.findIndex(value=>value.title===item.title);
// splice löscht eins aus ind this.list.splice(ind,1);
}
}
},
berechnet:{
// Berechnen Sie die Daten der abgeschlossenen und unfertigen Liste, indem Sie // Unfertige undolist(){ berechnen.
// Array-Funktion filtern, wenn das Rückgabeergebnis wahr ist, werden die aktuell durchlaufenen Daten beibehalten // andernfalls werden sie herausgefiltert return this.list.filter(item=>!item.done);
},
// Abgeschlossen doneList(){
gib diesen.Listenfilter zurück(Element=>Element.fertig);
}
},
betrachten:{
"Liste":{
handler(){
// setItem legt lokale Daten fest // JSON.stringify konvertiert JS-Objekt in JSON-String // JSON.prase konvertiert String in JS-Objekt localStorage.setItem("list",JSON.stringify(this.list))
},
tief:wahr,
}
}
})
</Skript>
</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:
|
<<: Lösung für das Problem, dass „order by“ in MySQL-Unterabfragen nicht wirksam ist
>>: Die Bilder in HTML werden direkt durch base64-kodierte Strings ersetzt
Artikel empfehlen
Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?
Inhaltsverzeichnis Überblick Definieren von Metho...
Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien
Originallink: https://vien.tech/article/138 Vorwo...
Führen Sie Datenstatistiken für verschiedene Werte desselben Felds in SQL durch
Anwendungsszenario: Es ist notwendig, die Anzahl ...
Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt
In CSS-Style-Datei angeben #class td /*Legen Sie ...
Detailliertes Tutorial zur Installation von MySQL 8.0.19 in der Zip-Version unter Win10
Inhaltsverzeichnis 1. Nach dem Download entpacken...
Eine kleine Einführung in die Verwendung der Position in HTML
Ich habe gestern gerade etwas HTML gelernt und kon...
Detaillierte Erklärung zu MySQL-Phantomlesevorgängen und wie man sie eliminiert
Inhaltsverzeichnis Transaktionsisolationsebene Wa...
Standardmäßige Stilanordnung von HTML4.0-Elementen
Code kopieren Der Code lautet wie folgt: html, Ad...
js implementiert eine auf Canvas basierende Uhrkomponente
Canvas war schon immer ein unverzichtbares Tag-El...
Detaillierte Erläuterung des Prinzips verteilter Sperren und drei Implementierungsmethoden
Derzeit werden fast alle großen Websites und Anwe...
So stellen Sie Redis schnell als Docker-Container bereit
Inhaltsverzeichnis Erste Schritte Datenspeicherun...
HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href
Manchmal möchten wir eine solche Funktion impleme...
Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument
Im Allgemeinen ist es unwahrscheinlich, dass Sie ...
Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode
Code kopieren Der Code lautet wie folgt: <HTML...
Zusammenfassung der Grundkenntnisse und Vorgänge der MySQL-Datenbank
Dieser Artikel erläutert anhand von Beispielen di...