vue实现本地存储添加删除修改功能
程序员文章站
2022-03-12 13:18:43
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下实现功能:输入的内容添加到正在进行列表中,双击修改功能,点击esc键,取消,还是之前的内容,点击回车,修改成功,修...
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 蒜薹跟蒜苗什么区别
下一篇: JPA如何使用findBy方法自定义查询