本文共 3395 字，大约阅读时间需要 11 分钟。

功能展示

1.初始页面

2.在输入框输入内容，按回车，添加到正在进行的列表

//键盘按下事件        keyup(){
               //输入框内容不能为空            if(this.value.trim() == '') return;            //按下回车，把输入框的值添加到正在进行的事件列表            this.list.push(                {
                       value : this.value,                    done :false   //默认未完成                }            );            this.value = '';        },

3.点击文本，变为输入框，可以对内容进行修改

changeState(index,item){
               // console.log(index);            // 告诉它要修改的下标            this.updateIndex = index;            // 让事件列表的输入框的值为传过来的item值（传过来的item值为上面输入框里面的值）            this.updateValue = item.value;        },

4.文本框失焦，输入框隐藏，值变为修改后的值

//失焦事件，当失焦的时候，让输入框隐藏        update(){
               //失焦的时候            // this.list[this.updateIndex]是一个对象            this.list[this.updateIndex].value = this.updateValue;            //失焦的时候让点击的下标和当前下标不一致，输入框就隐藏了            this.updateIndex = -1;        },

5.点击“x”，删除内容

//删除        del(index){
               //当前状态是修改状态的时候不能删除            if(this.updateIndex === -1){
                   this.list.splice(index,1);            }        },

6.点击正在进行的列表的内容前面的复选框，事件从正在进行的列表添加到已经完成的列表

//复选框，点击复选框，事件从正在进行列表添加到已完成列表        changeDone(item){
               //改变v-show的值            item.done = !item.done;        },

7.点击已经完成的列表的内容前面的复选框，事件从已经完成的列表添加到正在进行的列表

//复选框，点击复选框，事件从正在进行列表添加到已完成列表        changeDone(item){
               //改变v-show的值            item.done = !item.done;        },

8计算事件列表的数量

// 计算属性求事件列表的事件数量    computed :{
           yesSize(){
               let array =  this.list.filter(item => {
                   return item.done == false;            })            return array.length;        },        noSize(){
               let array =  this.list.filter(item => {
                   return item.done == true;            })            return array.length;        }    },

9.使用localstorage把事件保存到本地,并监听事件列表的变化

//保存到本地        save(){
               localStorage.setItem('toDoList',JSON.stringify(this.list));        }

// 监听,监听list的改变，只要一改变就保存到本地    watch : {
           list : {
               handler(array){
                   localStorage.setItem('toDoList',JSON.stringify(array));            },            deep : true        }    },

//生命周期函数    //初创期，只要一运行就会执行的函数    created(){
           let list = localStorage.getItem('toDoList');        if(list){
               this.list = JSON.parse(list);        }    },

完整代码

转载地址：http://htqzi.baihongyu.com/