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
Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)
Inhaltsverzeichnis Entwurfsszenario Technische Pu...
Analyse von Beispielen für gemeinsame Abfragevorgänge bei MySQL für mehrere Tabellen
Dieser Artikel beschreibt die gemeinsame Abfrageo...
So erstellen Sie ein Apr-Modul zur Tomcat-Leistungsoptimierung
Vorwort Tomcat ist ein weit verbreiteter Java-Web...
Lösung zur Codeaufteilung im Vue-Projekt
Inhaltsverzeichnis Hintergrund Zweck Vor der Spal...
NestJs verwendet Mongoose zum Betrieb von MongoDB
Ich habe vor Kurzem angefangen, das NestJs-Framew...
Detaillierte Einführung in die Linux-Firewall iptables, Konfigurationsmethode und Fall
1.1 Einführung in die iptables-Firewall Netfilter...
JavaScript implementiert Feuerwerkseffekte mit Soundeffekten
Ich habe eine halbe Stunde gebraucht, um den Code...
Design Association: Warum haben Sie am falschen Ort gesucht?
Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...
So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung
Vorwort Wenn wir Anwendungen als Docker-Container...
JS implementiert Städtelisteneffekt basierend auf VUE-Komponente
In diesem Artikelbeispiel wird der spezifische Co...
So wird eine Select-Anweisung in MySQL ausgeführt
Inhaltsverzeichnis 1. MySQL aus einer Makroperspe...
So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4
Nach dem Upgrade von MySQL auf Version 5.7 wurde ...
Eine detaillierte Analyse und Verarbeitung von MySQL-Alarmen
Vor kurzem hat ein Dienst einen Alarm ausgelöst, ...
So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)
Ursprung: Vor einigen Tagen hat ein Tester eine A...
Ausführliche Erklärung zu Sitzung und Cookie in Tomcat
Vorwort HTTP ist ein zustandsloses Kommunikations...