IMWeb训练营作业-todolist

Vue-todolist

---

这个todolist是原来模仿youtobe的一个教程用原生的js写的，是针对移动端的一个小应用，看了直播课后根据学到的相关vue-api改的。

运行的效果图是这样子的

核心代码也主要就是相关的几个api

/* 这里主要是判断localStorage是否存储的有上次的数据 */
if (localStorage.getItem('todolist')) {
    /* 因为localStorage只能存储字符串数据，所以这里要用JSON.parse对存储的信息进行解析成js对象 */
    var todoList = JSON.parse(localStorage.getItem('todolist'));
} else {
    var todoList = {
        todo: [],
        compt: []
    }
}

new Vue({
    el: '#main',
    data: todoList,
    methods: {
        /* 增加条目的方法前面的判断是用来判断输入框是否为空，没有做正则匹配，执行完后对当前数据存储在localstorage中 */
        addtodo: function (ev) {

            if (ev.currentTarget.parentNode.querySelector('input').value) {
                this.todo.push({ things: ev.currentTarget.parentNode.querySelector('input').value });
                ev.currentTarget.parentNode.querySelector('input').value = ' ';
                setlocalStorage(todoList);
            }

        },
        /* 删除代办条目 */
        deletetodo: function (item, ev) {
            console.log(item);
            this.todo.splice(this.todo.indexOf(item), 1);
            setlocalStorage(todoList);
        },
        /* 删除已完成条目 */
        deletecompt: function (item, ev) {
            console.log(item);
            this.compt.splice(this.compt.indexOf(item), 1);
            setlocalStorage(todoList);
        },
        /* 未完成事件标记已完成 */
        tocompt: function (item, ev) {
            console.log(item);
            this.compt.unshift(item);
            this.todo.splice(this.todo.indexOf(item), 1);
            setlocalStorage(todoList);
        },
        /* 已完成事件重新加入未完成列表 */
        retodo: function (item, ev) {
            console.log(item);
            this.todo.unshift(item);
            this.compt.splice(this.compt.indexOf(item), 1);
            setlocalStorage(todoList);

        }
    }
});
/* 定义localstorage的存储方法方便调用 */
function setlocalStorage(data){
    localStorage.setItem('todolist',JSON.stringify(data));
}

完整代码参考：github；
效果参考：demo页面。