IMWeb训练营作业-todolist

Vue-todolist

/* 这里主要是判断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));
}