【Vue学习总结】8.Vue事件结合双向数据绑定实现todolist

接上篇《 7.Vue定义方法、操作数据以及事件对象》

上一篇我们主要讲解了Vue事件，以及如何定义、执行方法，如何获取和改变数据，执行方法传值以及事件对象的操作。本篇我们讲解通过Vue事件，结合双向数据绑定来实现todolist的效果。
本系列博文使用的Vue版本：2.6.11

一、要实现的ToDoList效果

这一次我们要实现一个todolist的效果，这个todolist其实就是“正在进行”的任务的列表，最终的效果如下：

上方的输入框输入信息按回车，添加至“正在进行”的列表中；在“正在进行”的列表中，点击任务的复选框，任务就转移至“已经完成”列表中。我们可以理解为一个简单的待办事项管理的功能。

二、实现1.0版本

我们可以迭代来开发这个功能。首先可以实现一个最简单的版本，创建一个文本框，一个按钮，点击按钮的时候，文本框的数据就跑到下面去了。然后下面点击叉叉后就被删除：

这里我们需要用到的就是之前我们学习的双向数据绑定的技术。
下面我们就来实现这个版本的效果（还是在之前我们一开始搭建的工程里），删除之前的数据，留下最原始的代码：

然后我们在data()中分别绑定一个input数组的数据，和被选中后展示在横线下面的list数组：

我们可以看到，在doAdd方法中，我们分别做了两步，就是获取input框的值，然后添加到list中即可，很简单。

效果：
 

然后我们还有一个删除待办事项的功能，我们给每一个循环，加一个删除按钮，来删除这个对象。
删除原理其实也很简单，就是获取这个数组元素的下标（即key），然后在list数组中删除这个key对应的元素。
完整代码：

效果：

注意，这里取得元素的索引时，需要将元素的key遍历出来，并且在“:key”处进行声明。
删除元素这里我们用到了数组的splice方法，该方法向/从数组中添加/删除项目，然后返回被删除的项目：

有关于这个方法的详情，小伙伴可以至：https://www.w3school.com.cn/jsref/jsref_splice.asp
来详细学习。

以上我们就实现了一个1.0基本的待办事项版本。

三、实现2.0版本

上面的1.0版本实现了输入待办事项的效果，下面我们完成实现“进行中”和“已经完成”的效果，即input框输入的值，点击“添加”按钮会到进行中的列表，在进行中的列表里，点击复选框，数据又会移动到已经完成的列表里：

怎么来实现呢？方案其实也不难，数据还是之前的list数组，我们需要把数据中的数据进行分类，分别“进行中”和“完成”，然后在“进行中”数组中，只遍历状态为“进行中”的数据，在“已经完成”的数组中，只遍历状态为“完成”的数据即可。

这里原来的list数组的单数据元素已经无法满足上面的要求了，所以要把list数组改变为对象数据，每个对象是一个值和一个状态的属性：

data () {
  return {
    msg: '你好，vue',
    todo:'',
    list:[
      {
        title: '1111',
        checked: true
      },
      {
        title: '2222',
        checked: false
      }
    ]
  }
}

这里的title就是原来的数组值，而checked这个布尔（boolean）类型的值，就是标识是否已经完成的状态。

然后我们修改视图层，来分别显示“进行中”和“已经完成”的数据，它们的不同就是“进行中”只循环“checked”参数为false的数据，“已经完成”只循环“checked”参数为true的数据：

这里我们用到了一个“条件渲染”的属性，即“v-if”，当v-if的值为true的时候，元素就可以显示，为false的时候，元素不显示。这里要注意，因为在Vue2.0中，v-for的优先级会高于v-if，因此直接在v-for的标签中写v-if，该会v-if会重复运行在每个v-for中，此时编译器也会报错，所以我们新增一个

用来循环，在

标签中判断元素是否该显示。
效果：

然后我们在两个列表前面加复选框，写一个点击事件，点击该元素后，动态改变元素的checked的值，让其去另一个列表：

   

      

        {{item}}---删除
      
   

已完成

   

      

        {{item}}---删除
      
   

效果：

可以看到，这里我们利用数据双向绑定的特性，已经实现了上面想要设计的效果。
但这里还没完，我们在input框中新增数据的时候，也要符合list元素的结构：

methods:{ /*存放自定义方法的地方 */
    doAdd(){
     //1、获取文本框输入的信息  
     //2、将文本框的值push到list中，并清空文本框
     this.list.push({
       title: this.todo,
       checked: true
     });
     this.todo='';
    },removeData(key){
      this.list.splice(key,1);
    }
}

即点击新增按钮时，添加一个元素对象到list中，其checked属性默认是选中。
效果：
 

上面就实现了我们需要的效果。我们现在可以再加一个功能，就是在input框输入数据，按下回车键之后，数据就被录入。
这里我们使用键盘监听事件，为input添加一个键盘监听事件，传入事件对象event：

然后编写这个监听方法，当键盘为“13”（回车键对应的key值）时，执行新增数据方法即可：

doAdd2(e){
  if(e.keyCode==13){
    //当按下回车键的时候，执行doAdd方法
    this.doAdd();
  }
}

完整代码：

至此，一个todolist待办事项的全部功能就实现了。

最后我们可以看到，刷新页面时list新增的数据是会被清空的（只留下两个初始化的数据），这里是因为list数组没有被缓存。那么如何实现list在前端缓存，而不受页面刷新的影响呢？我们下一篇为大家揭晓。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/108189032