Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache

const Speicher = {
	set(Schlüssel, Wert){
		window.sessionStorage.setItem(Schlüssel, JSON.stringify(Wert));
	},
	get(Schlüssel){
		gibt JSON.parse zurück (window.sessionStorage.getItem(Schlüssel));
	},
	entfernen(Schlüssel){
		window.sessionStorage.removeItem(Schlüssel);
	}
}

Standardspeicher exportieren;

<Vorlage>
	<div Klasse="todo">
		<Kopfzeile>
			<input type="text" placeholder="Eingeben..." v-model="keyword" @keydown.enter="handleList">
			Aufgabenliste
		</header>
		<!-- In Bearbeitung -->
		<h4>In Bearbeitung...{{dolistNumber}}</h4>
		<template v-for="(Element, Index) in dolist" :key="index">
			<div Klasse="dolist" v-if="!item.checked">
				<label :für="index +'l'">
					<input type="checkbox" v-model="item.checked" :id="index +'l'" @change="handleChecked">
					{{item.title}}
				</Bezeichnung>
				<span @click="cancalDo(index)">X</span>
			</div>
		</Vorlage>

		<!-- Abgeschlossen -->
		<h4>Abgeschlossen...{{dolist.length - dolistNumber}}</h4>
		<template v-for="(Element, Index) in dolist" :key="index">
			<div Klasse="dolist" v-if="item.checked">
				<label :für="index +'ll'">
					<input type="checkbox" v-model="item.checked" :id="index +'ll'" @change="handleChecked">
					{{item.title}}
				</Bezeichnung>
				<span @click="cancalDo(index)">X</span>
			</div>
		</Vorlage>
	</div>
</Vorlage>

<Skript>
	Speicher aus „../storage.js“ importieren;
	Standard exportieren {
		Name: "Aufgabenliste",
		Daten() {
			zurückkehren {
				Stichwort: "", // Eingabeoptionen dolist: [],
			}
		},
		berechnet:{
			dolistNumber(){
				gib dies zurück.dolist.filter(item => item.checked === false).length;
			}
		},
		Methoden: {
			handleChecked(){
				// Aktualisieren nach Statusänderung storage.set('dolist', this.dolist);
			},
			handleList() {
				wenn (dieses.Schlüsselwort !== "") {
					dies.dolist.push({
						Titel: dieses Schlüsselwort,
						geprüft: falsch,
					});
					dieses.Schlüsselwort = "";
					Speicher.set('dolist', diese.dolist);
				}
				
			},
			abbrechen(index) {
				// dies löschen this.dolist.splice(index, 1);
				Speicher.set('dolist', diese.dolist);
			}
		},
		montiert(){
			let dolist = storage.get('dolist');
			wenn(dolist){
				dies.dolist = dolist;
			}
		},

	}	
</Skript>

<Stil>
	.todo {
		Rand: 400px automatisch;
		Mindesthöhe: 300px;
		Breite: 800px;
		Hintergrundfarbe: #eee;
	}

	.todo-Header {
		Position: relativ;
		Textausrichtung: zentriert;
		Höhe: 60px;
		Zeilenhöhe: 60px;
		Schriftgröße: 20px;
		Rahmen unten: 2px durchgezogen #fff;
	}

	.todo Header-Eingabe {
		Position: absolut;
		links: 40px;
		oben: 50 %;
		transformieren: verschiebeY(-50%);

		Gliederung: keine;
		Zeilenhöhe: 30px;
		Rahmenradius: 15px;
		Polsterung links: 30px;
		Rand: 1px durchgezogen #999;
		Schriftgröße: 16px;
		Breite: 100px;
		Übergang: alle 0,6 s linear;
	}

	.todo header input:focus {
		Breite: 200px;
	}

	.dolist {
		Polsterung: 20px;
		Schriftgröße: 16px;

	}

	.dolist Bezeichnung {
		Cursor: Zeiger;
	}

	.dolist Eingabe {
		Rand rechts: 10px;

	}

	.dolist span:letztes-Kind {
		schweben: rechts;
		Rand: 1px durchgehend grau;
		Hintergrundfarbe: #999;
		Farbe: #fff;
		Randradius: 50 %;
		Polsterung: 5px;
	}

	h4 {
		Polsterung unten: 20px;
		Textausrichtung: zentriert;
	}
</Stil>