Vueはローカルストレージの追加、削除、変更機能を実装します

この記事では、ローカルストレージの追加、削除、変更を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

機能性:

入力は進行中のリストに追加されます。

ダブルクリックして機能を変更します。

キャンセルするにはEscキーをクリックするか、前のコンテンツに戻ります。

Enter をクリックすると正常に変更されます。

変更フレームのフォーカスが失われると、変更は成功します。

ボタンが選択されると完了リストに入り、選択されていない場合は進行中リストに入ります。

行を削除するには、「削除」をクリックします。

次回ローカルストレージを開いたときに、最後に追加されたファイルはそのまま残ります。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
  *{
   パディング: 0;マージン: 0;
  }
   ul{
    リストスタイル: なし;
   }
   li{
    幅: 220ピクセル;
    高さ: 40px;
    境界線: 1px 実線ゲインズボロ;
    上マージン: 4px;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    アイテムの位置を中央揃えにします。
    背景色: #6CE26C;
   }
   .del{
    右マージン: 5px;
    境界線: なし;
    幅: 20px;
    高さ: 20px;
    背景色: #008200;
   }
  </スタイル>
 </head>
 <本文>
  <div id="アプリ">
   <!-- 入力コンテンツの先頭と末尾のスペースをフィルタリングします-->
   <!-- イベントを入力 -->
   <input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
   <!-- 進行中の操作の数を取得します -->
   <h3>進行中{{undolist.length}}</h3>
   <ul class="リスト">
    <!-- トラバース中のコンテンツを表示する -->
    <li class="item" v-for="元に戻すリスト内のアイテム" :key="item.name">
     <divクラス="">
      <!-- 複数選択ボックスはチェックされていない false 状態です -->
     <input type="checkbox" v-model="item.done" />
     <!-- デフォルトの状態は 0 です。ダブルクリックすると、状態は 1 になり、コンテンツは tempEdit に割り当てられます -->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- 入力ボックスの内容は tempEdit の値です。state=1 の場合、入力ボックスが表示されます。
     Esc をクリックすると、状態は非表示になり、内容は変更されずに元の値のままになります。
     Enterキーを押したときに状態が0の場合、入力ボックスは非表示になり、変更されたtempEditがitem.nameに割り当てられます。
     フォーカスが失われたときに状態が0の場合、入力ボックスは非表示になり、変更されたtempEditがitem.nameに割り当てられます。
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==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>
     <!-- 削除をクリックすると内容が削除されます -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
   <!-- 完了数量 -->
   <h3>完了しました {{doneList.length}}</h3>
   <ul class="リスト">
    <!-- 完了したコンテンツをトラバースして表示します-->
    <li class="item" v-for="doneList 内のアイテム" :key="item.name">
     <divクラス="">
      <!-- 複数選択ボックスは選択された状態です -->
     <input type="checkbox" v-model="item.done" />
     <!-- デフォルトの状態は 0 です。ダブルクリックすると、状態は 1 になり、コンテンツは tempEdit に割り当てられます -->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- 入力ボックスの内容は tempEdit の値です。state=1 の場合、入力ボックスが表示されます。
     Esc をクリックすると、状態は非表示になり、内容は変更されずに元の値のままになります。
     Enterキーを押したときに状態が0の場合、入力ボックスは非表示になり、変更されたtempEditがitem.nameに割り当てられます。
     フォーカスが失われたときに状態が0の場合、入力ボックスは非表示になり、変更されたtempEditがitem.nameに割り当てられます。
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==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>
     <!-- 削除をクリックすると内容が削除されます -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
  </div>
 </本文>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var vm = 新しい Vue({
   el:"#アプリ",
   データ（）{
    戻る {
     // リストリスト // getItemはローカルストレージデータを取得するために使用します。
     // || "[]" 配列リストを取得できない場合は、空の配列リストに変換します: JSON.parse(localStorage.getItem("list")|| "[]"),
     // 一時データ保存場所 temp:'',
     // 変更ボックスの一時データ保存場所 tempEdit:''
    }
   },
   方法:{
    // 追加 additem(){
     // テキストボックスが空のときに戻ります if(this.temp===""){return;}
     // 後ろに追加 this.list.push({
      名前:this.temp,
      完了:false、
      状態:0
     })
     // 一時ボックスをクリアします this.temp="";
    },
    // 削除 removeitem(item){
     // ポップアップ ボックス var flag = window.confirm ("削除してもよろしいですか?");
     if(フラグ){
      // 条件を満たす要素のインデックス値を検索します var ind=this.list.findIndex(value=>value.title===item.title);
      // splice は ind から 1 つを削除します this.list.splice(ind,1);
     }
    }
   },
   計算:{
    // 完了リストと未完了リストのデータを、 // 未完了 undolist(){ を計算して計算します。
     // 配列をフィルターする関数。返される結果が true の場合、現在走査されているデータが保持されます。 // それ以外の場合はフィルター処理されます。 return this.list.filter(item=>!item.done);
     
    },
    // 完了 doneList(){
     this.list.filter(item=>item.done) を返します。
    }
   },
   時計：{
    "リスト"：{
     ハンドラ（）{
      // setItem はローカルデータを設定します // JSON.stringify は js オブジェクトを json 文字列に変換します // JSON.prase は文字列を js オブジェクトに変換します localStorage.setItem("list",JSON.stringify(this.list))
     },
     深い:真、
    }
   }
  })
 </スクリプト>
</html>