vue TodoList 使用本地储存进行修改

最新推荐文章于 2023-03-06 11:02:02 发布
最新推荐文章于 2023-03-06 11:02:02 发布
阅读量315 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/119042125
版权

之前做的TodoList当页面刷新会导致数据丢失

那什么时候进行数据的存储？如果对每个可以修改数据的控件进行编写逻辑显然,太麻烦

所以只要当todos改变了就重新存储一份localS0torage因为相同的key会被覆盖

读取数据直接写在data属性后即可

修改一般写在监视中

深度监视问题由于会todos属性中为一个对象集所以需要深度监视

 

但是会发现不完善,如果一开始没数据

localStorage读出来的就是null然后JSON.parse后还是null,所以此时todos就为null了

然后由于props把todos传给了footer而footer中用到了length 而null没有length就报错了

 

 

 解决方法由于当为null时表示的为false,所以用一个或就能解决

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详细vue实现本地存储添加删除修改功能综合案例
lwf0829的博客
11-23 2003
实现功能： 输入的内容添加到正在进行列表中， 双击修改功能， 点击esc键，取消，还是之前的内容， 点击回车，修改成功， 修改框失焦时修改成功， 选中按钮时进入已完成列表，未选中时在正在进行中列表， 点击删除进行删除当行， 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <st
React 入门：实战案例 TodoList 修改 Todo Item的状态
将PHP Web开发进行到底
12-10 820
本文实现点击 Item 组件的复选框 checkbox 时，切换复选框的选中状态，同时更新 TodoList 在组件状态 State 中的数据状态。
Vue28-TodoList_本地存储
A1066223647的博客
05-31 145
Vue28-TodoList_本地存储 文章目录Vue28-TodoList_本地存储 在APP.vue中开启深度监视，初始化数据均从localStorge中获取 <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/> <MyList :todos="
ToDoList 增删改查
xiaoenwu的博客
12-23 277
ToDoList 主要功能 增加数据 删除数据 修改数据 查询数据渲染页面 1 . HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" ...
关于ToDolist 的增删改查 用jQuery来实现
this_name_true的博客
05-29 1621
代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.js" &gt;&lt;/script&gt; &lt;titl
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
vue实现ToDoList简单实例
08-31
主要为大家详细介绍了vue实现ToDoList简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
主要介绍了vue实现todolist功能、todolist组件拆分及todolist的删除功能,需要的朋友可以参考下
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue TodoList案例
09-02
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务等等。
vue优化，本地存储的方法
qq_40944918的博客
10-24 687
vue配合vuex和本地存储可以减少HTTP请求，进行优化 本地储存：sessionStorage、localStorage和cookie之间的异同 共同点：都是保存在浏览器端，且同源的。 区别：cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间 ​ 来回传递 ​ cookie数据不能超过4KB,同时因为每次http请求都会携带cooki...
Vue学习：todolist 编辑
weixin_47295886的博客
03-06 185
存在问题：当你点击 但是没有进行焦点 之间失去焦点就会存在问题。当失去焦点变成正常文字——真正指向回调。使用追加属性，要对应的get set。item里面设置：对于是否显示编辑。还要一个编辑全部删除了也有问题。在挂载钩子注册和销毁中解绑。更新去APP.vue中。接收输入框传入的参数。
vue操作本地存储
weixin_30575309的博客
01-02 867
const ls = window.localStorage const ss = window.sessionStorage export const LStorage= { getItem(key) { try { return JSON.parse(ls.getItem(key)) } catch (err) { return null ...
Vue 浏览器本地存储
Errol's Blog
04-02 1866
Vue 浏览器本地存储
使用Vue制作todoList实现增删改
Henry的博客
11-23 937
使用Vue制作todoList
vue通过本地存储来实现todolist
zhao_li_ming的博客
10-05 331
1.效果图 2.分析步骤 1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 2.接着写静态布局 3.挂载dom 4.添加指令 5.保存需要的数据 6.添加数据 7.删除数据 8.改变每一条数据的状态完成和未...
vue实现todolist基本功能以及数据存储功能
qq_38996246的博客
08-13 1636
实现todolist功能，具体实现如下： 可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addFun();进行调用。 &lt;d...
todolist增，删，改，查的效果的实现
qq_60891094的博客
06-14 428
todolist增，删，改，查的效果的实现
TodoList实现增删改查
Shmily的博客
12-24 1244
本篇文章主要介绍了用TodoList实现一个简单的TodoList的增删改示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 引入React模块 //引入React模块 import React from 'react' 添加数据 //点击添加新数据 clIck(){ console.log(this.refs.myInput.v...
vue todolist
最新发布
08-06
Vue Todolist 是一个基于 Vue.js 框架开发的任务清单应用。通过使用 Vue.js 的响应式数据绑定和组件化开发的特性，可以实现动态更新数据和交互效果。 首先，我们可以使用 Vue 的模板语法来编写任务清单的布局和 HTML 结构。通过 v-for 指令可以循环渲染任务列表，使得我们可以方便地添加、编辑和删除任务。 其次，通过使用 Vue 的计算属性，我们可以实现对任务列表进行过滤和排序操作。比如可以根据任务状态（已完成、未完成）来显示不同的任务列表，也可以根据任务的添加时间或者截止时间来进行排序。 在交互方面，我们可以使用 Vue 的事件绑定机制来实现添加、编辑和删除任务的功能。比如，可以使用 v-on 指令绑定点击事件，当用户点击添加按钮时，会触发相应的方法来添加新的任务到任务列表中。 另外，我们可以通过使用 Vue 的指令和表单元素的双向数据绑定来实现任务的编辑功能。当用户点击某个任务的编辑按钮时，可以根据该任务的索引值，展示一个输入框供用户编辑任务内容，完成编辑后，会自动将编辑后的内容更新到任务列表中。 最后，我们可以使用 Vue 的路由功能来实现多个页面之间的切换。比如可以添加一个导航栏，每个导航项对应一个页面，点击导航项时，会切换到对应的页面，从而实现任务清单的不同视图切换。 综上所述，Vue Todolist 是一个基于 Vue.js 框架开发的任务清单应用，通过利用 Vue.js 的特性，可以实现数据的实时更新和交互效果，提供灵活的任务管理功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值