Vue+element实现todo（三）

（一）添加item

为了知道用户输入了什么内容，使用v-model把input的value值和vue实例绑定（红框），这样vue就可以知道我们输入的值

image.png

在data里注册todo:""，然后回车后，需要把Input的值添加到列表里，再监听input的回车事件（蓝框），绑定键盘事件为keyup，enter是按下回车键并不是按下其他的什么键，注意：因为用了element组件，必须加上native才可以监听，否则无效,,接着实现addto的方法，done我会在后面说明

image.png

最后一句this,todo是我们按下回车之后，使输入框清空。
接着我们不想用户在按下回车的时候也增加，直接加一个if语句，这样基本就实现Input输入，按下回车，list增加。

image.png

（二）删除todo
用户点击删除按钮，则将对应item删除，下面就是家一个删除按钮

image.png

，但是如何知道我们删除的是哪个item，就需要往removeto里面传递一个参数（key），

image.png

这里我用了element框架的弹框组件，这样删除不会那么粗暴，然后用数组的slice方法，成功删除该item。
（三）标记完成或者未完成
这里就要说到done，为了标记是完成或者未完成的状态，我们需要往List里增加一个done属性，默认是false，截图代码中已经标明，顺便再改下addto方法也要修改一下

image.png

这里使用到了v-if指令，最开始肯定是未选中状态，所以是!item.done，但是如何发现状态，这里用到了element框架的复选框，绑定item.done，来标记完成和未完成的状态。因为用的框架的分页组件，所以在完成分页组件里同样家v-if，这是完成状态，在复选框中同样绑定v-model：item.done。

image.png