Vue实现一个todolist项目

2018年9月14日23:39:03 2 45 阅读

在官网看了vue的一些语法以及组件相关的知识,但是就那样看感觉效果不好,根本记不住,知识点串不到一起,于是试着去实现了一个简单的todolist,通过组件的方式来实现,并且整合了element-ui的message提示,目前没有实现太复杂的功能,先从简单的开始吧~

Vue实现一个todolist项目

添加任务

在input中输入内容,然后单击新增按钮,将input的内容展示在table表格中。

内容为空提示

当input中没输入内容的时候,会提示没输入内容。

完成任务

任务完成时候,单击完成按钮,删除该任务,原理是使用splice()方法将其删除。

表格的隐藏和显示

通过判断判断事件,创建事件时给table赋一个block显示的属性,删除的时候,使用dom的childNodes 属性判断table的子节点长度,通过调试发现子节点没内容的时候长度是多少,取值,然后给表格赋一个none的属性实现。

题外话:因为开了eslint检查工具加上强迫症硬是把每一个语法错误都干掉了~

效果演示:

Vue实现一个todolist项目

Github:https://github.com/haohaitao/PersonalExample

在线效果:Demo

 

完。


 

weinxin
来找我玩~
这是我的微信扫一扫~
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:2   其中:访客  1   博主  1

    • avatar 区块链 2

      [斜眼笑] [略] [略] 我就是来试一试表情包的! [哼] [抠鼻] [懒得理你] [小九九]

        • avatar 舍得 博主

          @区块链 请查收。