这篇文章给大家分享的是有关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()"/> <!-- 获取正在进行的数量 --> <h4>正在进行中{{undolist.length}}</h4> <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> <!-- 已完成数量 --> <h4>已经完成{{doneList.length}}</h4> <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>
感谢各位的阅读！关于“vue如何实现本地存储添加删除修改功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
