vue实现本地存储添加删除修改功能
更新时间:2021年11月25日 16:15 点击:1062 作者:温L
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/lwf0829/article/details/121502600
上一篇: vue实现搜索小功能
下一篇: vue默认插槽的理解与实例代码
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02