todomvc实现

主要分为以下几个功能:
1.数据列表显示及状态改变(v-for v-model),主要分为有、无数据两种。
2.添加任务
页面初始化时,文本框获得焦点
回车添加至任务列表(不允许有非空数据)(@keyup.enter push)
添加完成后清空文本框
3.点击箭头标记所有任务选中/未选中
4.任务项
切换任务完成状态(v-bind)
删除任务项(splice)
双击label进入编辑模式(设中间变量 默认为null v-model双向绑定)
5.编辑任务项
编辑文本框自动获取焦点
在编辑文本框后敲回车或者点文本框外区域失去焦点(keyup.enter 中间变量为null即可)
输入状态下按esc取消
6.显示所有未完成任务数
两种方案:(1)methods
(2)computed
具体用哪种,视情况而定。
7.清除所有已完成任务(用forEach遍历,但每遍历一次,删除已完成项,索引会发生变化,可以换种思路,保留未完成的项)
8.将数据持久化到localStorage
9.路由状态切换(onhashchange)

以上功能仅实现部分 所有功能会陆续实现

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 3,945评论 0 3
  • 这篇文用心写给Spenser写作课二期同学,也写给所有想开始写作的你。 在我的朋友圈,有一条只有自己看得到的心语:...
    elian晓莲阅读 3,870评论 1 3
  • 我女儿也在你们老家上大学 前些天我和朋友逛街,一直逛到晚上9点多 ,我们打算买菜回去做饭,但这个点估计许多地方都关...
    云的那边是海阅读 1,279评论 0 0
  • 最近看到很多人都在写自己的姥爷那一辈的事情,有些言辞很幽默,写尽了老一辈之间纯粹的爱情,有些言辞悲伤,诉说着自...
    郭xx阅读 1,342评论 0 1

友情链接更多精彩内容