この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッシュのアプリケーション実装について紹介し、次のように共有します。
ブラウザのローカルキャッシュ:
プロトタイプチェーンは基本的に同じであることがわかりますが、唯一の違いは
この例では、sessionStorage が使用され、そのための小さなパッケージが作成されます。 定数ストレージ = { 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; テキスト配置: 中央; } </スタイル> Vue で TodoList をカプセル化するケースとブラウザローカルキャッシュのアプリケーション実装についての記事はこれで終わりです。Vue TodoList に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明
>>: Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明
著者は最近、仕事でパフォーマンスのボトルネックの問題に遭遇しました。MySQL テーブルには毎日約 ...
北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...
ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...
目次仕様a. ページファイルはVueの単一ファイルコンポーネント仕様に準拠しています。 b. コンポ...
mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...
この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...
Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...
CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...
私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...
1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...
目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....
MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...