vue实现本地存储添加删除修改功能

250 阅读 0 评论 165 点赞

我是靠谱客的博主发嗲板凳，这篇文章主要介绍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="">
      
     <input type="checkbox" v-model="item.done" />
     
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     
     <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="">
      
     <input type="checkbox" v-model="item.done" />
     
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     
     <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!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>