vue|vue 实现简单版本 todolist vue实现简单版本todolist

昨天下午在记事本的功能上做了优化，做成了简单的 todolist，主要是来巩固一下vue的各种指令
以下是效果图

文章图片

文章图片

文章图片

以上是简单版本的效果图，好啦，献上我的代码~欢迎大家踊跃提出建议

todolist - 锐客网 todolist 待办事项 {{ arr.length }} {{ item.name }} 已完成 {{ complate.length }} {{item.name}} clear

一开始有个小bug , 如果勾选了待办中的第三条数据，数据从待办删除了，但是最后一条的勾选框还在。因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上id作为唯一key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。但是我这里没有id，所以我暂时用的name做为唯一的key
大家实际开发中尽量用id 做为唯一的 key
【vue|vue 实现简单版本 todolist】解决方式：通过给两个 v-for 添加一个 :key=item.name ,
此处附上我的git地址，可以下载源码哦~
https://gitee.com/celinaTong/...