Vue待办清单小实例

2018年3月1日22:09:18 发表评论 93

今天学会了一个vue实现待办清单的简单实例,是一个html单页,没有使用.vue文件,因为.vue文件是不可以直接运行的,对于新手来说,必须要学会vue项目搭建才可以运行.vue项目,我们这个待办清单实例代码量很少,完全不需要使用的.vue文件,下面一起来看看:

Vue待办清单小实例

这个待办清单需要实现的功能:
1. 可添加清单
2. 显示清单的数据
3. 可切换清单状态,并且可删除
4. 可编辑清单

待办清单完整代码

代码解析

添加清单

  1. 给待办清单输入框绑定一个@keyup.enter事件,并且设置双向绑定。
  2. 使用todoList数组来存储所有待办清单,有名字和状态两个属性
  3. 使用v-for循环显示所有待办

显示清单数据

  1. 使用todoList.length显示总清单数
  2. 设置一个未完成待办的计算属性noend,并且显示未完成
  3. 使用todoList.length-noend就是已完成的清单数量

切换清单状态

  1. 给清单的复选框加个点击事件:当前状态为相反数
  2. 给删除的元素添加个delect事件,删除当前索引。

双击编辑清单

  1. 循环给所有待办名称绑定点击事件
  2. 如果当前点击就隐藏div,显示编辑的input
  3. 编辑的input绑定esc,enter事件等
猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: