用Vue写一个todolist功能

今天打算用Vue来完成一个todolist的小案例，如下图：

功能分析
首先看看有什么功能，要用什么方法完成

1. 在文本框输入待办事项，按下回车事项会添加到正在进行下面
   
2. 任务完成点击左边的复选框，事项会添加到已经完成的任务
   
3. 如果任务取消，点击右边的横杠删除即可

如何实现功能

1. 要完成上面的第一个功能，按下回车添加任务，有三种方式

• （1）. 键盘事件 回车就是 keyCode = 13
  在 vue添加事件的方式 @keyCode

三步完成：

1. 写一个add方法 @keyup="addTask()”
2. 在用一个text 进行数据绑定
3. 还需要有个数组，存储待办事项 todolist: [],利用 v-for 进行循环添加

代码：

<input type="text" v-model="text" v-mykey="add" @keyup.enter="add"  class="inpu" id="title" placeholder="添加to do">
<ol  id="todolist" class="demo-box">
   <!-- 遍历 todolist 进行添加 -->
    <li v-for="(item,index) in todolist" :key="index+todo">
    </li>
</ol>

data :{
   
                todolist: [],
                text : "",
            },
 methods:{
   
           add(){
    //未完成任务添加
                    this.todolist.push(this.text)
                    this.text = ""
                },
               }

这么写，你会发现有点问题，无论按下键盘的那个键都会进行添加，所以要加上按下的那个键进行判断

 add(event,type){
   
         if(type == "up" && event.keyCode != 13){