vue實現本地存儲添加刪除修改功能

本文實例為大傢分享瞭vue實現本地存儲添加刪除修改的具體代碼,供大傢參考,具體內容如下

實現功能:

輸入的內容添加到正在進行列表中,

雙擊修改功能,

點擊esc鍵,取消,還是之前的內容,

點擊回車,修改成功,

修改框失焦時修改成功,

選中按鈕時進入已完成列表,未選中時在正在進行中列表,

點擊刪除進行刪除當行,

本地存儲下次打開上次添加的還在

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  *{
   padding: 0;margin: 0;
  }
   ul{
    list-style: none;
   }
   li{
    width: 220px;
    height: 40px;
    border: 1px solid gainsboro;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6CE26C;
   }
   .del{
    margin-right: 5px;
    border: none;
    width: 20px;
    height: 20px;
    background-color: #008200;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- 過濾輸入內容首尾空白符 -->
   <!-- 回車事件 -->
   <input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
   <!-- 獲取正在進行的數量 -->
   <h3>正在進行中{{undolist.length}}</h3>
   <ul class="list">
    <!-- 將正在進行的內容遍歷顯示出來 -->
    <li class="item" v-for="item in undolist" :key="item.name">
     <div class="">
      <!-- 多選框為未選中false狀態 -->
     <input type="checkbox" v-model="item.done" />
     <!-- 默認為state是0,當雙擊時state為1,內容賦給tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- input框內容為tempEdit的值,state=1時顯示輸入框,
     點擊esc時state為零隱藏,內容還是原來的值,不進行修改,
     當回車時state為0就隱藏input框,將修改過得tempEdit,賦給item.name
     當失焦時state為0就隱藏input框,將修改過得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="list">
    <!-- 將已完成的內容遍歷顯示出來 -->
    <li class="item" v-for="item in doneList" :key="item.name">
     <div class="">
      <!-- 多選框為選中true狀態 -->
     <input type="checkbox" v-model="item.done" />
     <!-- 默認為state是0,當雙擊時state為1,內容賦給tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- input框內容為tempEdit的值,state=1時顯示輸入框,
     點擊esc時state為零隱藏,內容還是原來的值,不進行修改,
     當回車時state為0就隱藏input框,將修改過得tempEdit,賦給item.name
     當失焦時state為0就隱藏input框,將修改過得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>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var vm=new Vue({
   el:"#app",
   data(){
    return{
     // 清單列表
     // getItem是獲取本地存儲數據,
     // ||"[]"如果獲取不到轉換為空的數組
     list:JSON.parse(localStorage.getItem("list")||"[]"),
     // 臨時添加的數據存放處
     temp:'',
     // 修改框的臨時數據存放處
     tempEdit:''
    }
   },
   methods:{
    // 添加
    additem(){
     // 文本框為空時就返回
     if(this.temp===""){return;}
     // 添加到後面
     this.list.push({
      name:this.temp,
      done:false,
      state:0
     })
     // 清空臨時框
     this.temp="";
    },
    // 刪除
    removeitem(item){
     // 彈框
     var flag=window.confirm("確定要刪除嗎?");
     if(flag){
      // 查找符合條件元素的索引值
      var ind=this.list.findIndex(value=>value.title===item.title);
      // splice從第ind刪除一個
      this.list.splice(ind,1);
     }
    }
   },
   computed:{
    // 通過計算把現有的list數據計算出已完成和未完成
    // 未完成
    undolist(){
     // filter數組的過來函數,如果返回結果為真則當前遍歷的數據保留
     // 否則就會被過濾掉
     return this.list.filter(item=>!item.done);
     
    },
    // 已完成
    doneList(){
     return this.list.filter(item=>item.done);
    }
   },
   watch:{
    "list":{
     handler(){
      // setItem設置本地數據
      // JSON.stringify把js對象轉換為json字符串
      // JSON.prase把字符串轉換為js對象
      localStorage.setItem("list",JSON.stringify(this.list))
     },
     deep:true,
    }
   }
  })
 </script>
</html>

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: