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
Umfassendes Verständnis der HTML-Grundstruktur
Einführung in HTML HyperText-Auszeichnungssprache...
Detaillierte Schritte zur Installation von MySQL auf CentOS 7
Wenn wir in CentOS7 MySQL installieren, wird Mari...
Analyse einfacher Anwendungsbeispiele für abgeleitete MySQL-Tabellen (abgeleitete Tabellen)
Dieser Artikel beschreibt anhand eines Beispiels ...
Interviewer stellen häufig Fragen zum Lebenszyklus von React
React-Lebenszyklus Zwei Bilder zum besseren Verst...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
So verwenden Sie Binlog zur Datenwiederherstellung in MySQL
Vorwort Kürzlich wurden Daten online falsch bearb...
In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.
Inhaltsverzeichnis 1: Handschriftliche Seitennumm...
SQL-Implementierung von LeetCode (181. Angestellte verdienen mehr als Manager)
[LeetCode] 181.Mitarbeiter verdienen mehr als ihr...
Verwenden von Textschatten- und Elementschatteneffekten in CSS
Einführung in Textschatten Verwenden Sie in CSS d...
Tutorial zu HTML-Tabellen-Tags (23): Zeilenrahmen-Farbattribut BORDERCOLORDARK
In Zeilen können dunkle Rahmenfarben individuell ...
Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue
Inhaltsverzeichnis 1. Einfaches Seitenbeispiel 2....
Zusammenfassung einiger gängiger Methoden des JavaScript-Arrays
Inhaltsverzeichnis 1. So erstellen Sie ein Array ...
Detaillierte Erklärung dieses Zeigeproblems in JavaScript
Vorwort Der This-Zeiger in JS hat Anfängern schon...
Erfahren Sie mehr über den Hyperlink A-Tag
fragen: Ich habe den Hyperlink mit CSS formatiert...
Einführung in 10 Hooks in React
Inhaltsverzeichnis Was ist ReactHook? React biete...