vue实现ToDoList待办事项/清单

1、这个功能运用的知识点比较多，computed计算，watch监听，directives自定义指令和methods定义事件，还有一些属性绑定，列表渲染，表单绑定指令，按键修饰符，表单修饰符等...

2、部分知识点

3、效果展示

功能说明：

1.在头部输入框内输入内容按回车键即可待办事项

2.单击待办项的前面选择框可实现未完成或已完成切换

3.双击待办内容可以修改里面的内容，修改完成后点击空白处或enter键都可实现修改，如果不想修改按Esc键可恢复初始内容。

4.单击待办事项最后删除按钮可删除该待办项

5.表头右边的数字是未完成和已完成的待办事项数量

6.另外待办事项的数据已存储在本地，保留已有数据（换浏览器需重新添加）

7.具体功能请亲自操作尝试

4、代码

vue.js引入（vue.js引入地址记得修改）

css代码：

 html代码：

			

				

					
ToDoList
					
					
				
			
			

				
未完成{{not()}}
				

					
					

						
						
						
						{{item.title}}
						
						
						
						
						
						
						X
					
				
				
已完成{{finish()}}
				

					
					

						
						
						
						{{item.title}}
						
						
						X
					
				
			
		

 js代码：

编写代码不易，记得点赞支持！！！