在官网看了vue的一些语法以及组件相关的知识,但是就那样看感觉效果不好,根本记不住,知识点串不到一起,于是试着去实现了一个简单的todolist,通过组件的方式来实现,并且整合了element-ui的message提示,目前没有实现太复杂的功能,先从简单的开始吧~
添加任务
在input中输入内容,然后单击新增按钮,将input的内容展示在table表格中。
内容为空提示
当input中没输入内容的时候,会提示没输入内容。
完成任务
任务完成时候,单击完成按钮,删除该任务,原理是使用splice()方法将其删除。
表格的隐藏和显示
通过判断判断事件,创建事件时给table赋一个block显示的属性,删除的时候,使用dom的childNodes 属性判断table的子节点长度,通过调试发现子节点没内容的时候长度是多少,取值,然后给表格赋一个none的属性实现。
题外话:因为开了eslint检查工具加上强迫症硬是把每一个语法错误都干掉了~
效果演示:
Github:https://github.com/haohaitao/PersonalExample
在线效果:Demo
完。
微信小程序
互联网开发,终身学习者,欢迎您的关注!
2018年9月18日 上午10:15
我就是来试一试表情包的!
2018年9月18日 上午10:17
@区块链 请查收。