Vue-todoList

vue-bootstrap-todoList

用vue做的一个小demo,使用了bootstrap.css进行布局,很方便

• 一个简单的todolist可以实现添加事项,查看全部事项,已完成事项和未完成事项,实时计算出还未完成的事项的数量,修改事项描述,本地存储实现历史数据保存到本地,hash值实现简易的前端路由

简易操作

• 添加事项输入完成后,按回车键完成添加,会检测内容是否为空,为空则不添加,添加成功会显示在下面的list中,默认新添加的事件都是未完成的
• 可以根据全部事项/已完成/未完成,来查看某一类事项
• 点击没一项左侧的勾选按钮,可以将事件标记为已完成,则这条记录被划上横线颜色变灰
• 双击列表项可以对事项内容进行修改,输入完成后按enter或者点击输入框以外的地方结束修改,修改后刷新当前事项的内容描述,如果将事项内容改为空了则将该项删除
• 在分类查看中勾选任意项都会刷新数据,将相应的内容归置到相应的分类中
• 点击右侧的删除按钮,会移除该事项,谨慎操作
• 重新打开页面会获取上次操作的数据并呈现出来