この記事では主に、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 コマンドの詳細な説明
ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...
CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:cen...
MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 ...
データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...
bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...
テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...
1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...
【1】中央の要素の幅と高さを知る絶対値 + 負のマージンコードの実装 .wrapBox5{ 幅: 3...
ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...
1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...
概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...
この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...
目次1. 手ぶれ補正機能とは何ですか? 1. なぜ手ぶれ補正機能が必要なのでしょうか? 2. 手ぶれ...
目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...
目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...