VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

定数ストレージ = {
	set(キー, 値){
		window.sessionStorage.setItem(キー、JSON.stringify(値));
	},
	get(キー){
		JSON.parse(window.sessionStorage.getItem(key)) を返します。
	},
	削除(キー){
		window.sessionStorage.removeItem(キー);
	}
}

デフォルトのストレージをエクスポートします。

<テンプレート>
	<div class="todo">
		<ヘッダー>
			<input type="text" placeholder="Enter..." v-model="キーワード" @keydown.enter="handleList">
			やることリスト
		</ヘッダー>
		<!-- 進行中 -->
		<h4>進行中...{{dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<div class="dolist" v-if="!item.checked">
				<label :for="index +'l'">
					<input type="checkbox" v-model="item.checked" :id="index +'l'" @change="handleChecked">
					{{item.title}}
				</ラベル>
				<span @click="cancalDo(index)">X</span>
			</div>
		</テンプレート>

		<!-- 完了 -->
		<h4>完了しました...{{dolist.length - dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<div class="dolist" v-if="item.checked">
				<label :for="index +'ll'">
					<input type="checkbox" v-model="item.checked" :id="index +'ll'" @change="handleChecked">
					{{item.title}}
				</ラベル>
				<span @click="cancalDo(index)">X</span>
			</div>
		</テンプレート>
	</div>
</テンプレート>

<スクリプト>
	'../storage.js' からストレージをインポートします。
	エクスポートデフォルト{
		名前: "todoList",
		データ（） {
			戻る {
				キーワード: "", // 入力オプション dolist: [],
			}
		},
		計算:{
			リスト番号(){
				this.dolist.filter(item => item.checked === false).length を返します。
			}
		},
		メソッド: {
			ハンドルチェック(){
				// ステータスを変更した後に更新します storage.set('dolist', this.dolist);
			},
			ハンドルリスト() {
				if (this.keyword !== "") {
					this.dolist.push({
						タイトル: this.keyword,
						チェック済み: false、
					});
					this.keyword = "";
					ストレージを設定します('dolist', this.dolist);
				}
				
			},
			cancalDo(インデックス) {
				// これを削除します this.dolist.splice(index, 1);
				ストレージを設定します('dolist', this.dolist);
			}
		},
		マウントされた(){
			dolist = storage.get('dolist'); とします。
			if(dolist){
				this.dolist = dolist;
			}
		},

	}	
</スクリプト>

<スタイル>
	.todo {
		マージン: 400px 自動;
		最小高さ: 300px;
		幅: 800ピクセル;
		背景色: #eee;
	}

	.todo ヘッダー {
		位置: 相対的;
		テキスト配置: 中央;
		高さ: 60px;
		行の高さ: 60px;
		フォントサイズ: 20px;
		下境界線: 2px 実線 #fff;
	}

	.todo ヘッダー入力 {
		位置: 絶対;
		左: 40px;
		上位: 50%;
		変換: translateY(-50%);

		アウトライン: なし;
		行の高さ: 30px;
		境界線の半径: 15px;
		左パディング: 30px;
		境界線: 1px 実線 #999;
		フォントサイズ: 16px;
		幅: 100ピクセル;
		遷移: すべて .6 秒線形。
	}

	.todo ヘッダー入力:フォーカス {
		幅: 200ピクセル;
	}

	.dolist {
		パディング: 20px;
		フォントサイズ: 16px;

	}

	.dolist ラベル {
		カーソル: ポインタ;
	}

	.dolist入力{
		右マージン: 10px;

	}

	.dolist span:最後の子 {
		フロート: 右;
		境界線: 1px の灰色
		背景色: #999;
		色: #fff;
		境界線の半径: 50%;
		パディング: 5px;
	}

	h4 {
		パディング下部: 20px;
		テキスト配置: 中央;
	}
</スタイル>