Vue版本为v2.3.3,使用UI框架为bulma(v0.5.3),使用LocalStorage实现本地存储
待实现的功能:拖拽、修改、删除
const STORAGE_KEY = 'todo';
var store = {
fetch() {
return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
},
save(items) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
}
}
new Vue({
el: "#todo-list-example",
data: {
newTodoText: "",
todos: store.fetch()
},
methods: {
addNewTodo() {
if (this.newTodoText.trim() === "") return;
this.todos.push({
title: this.newTodoText,
done: false
});
this.newTodoText = "";
},
toggleDone(todo) {
todo.done = !todo.done;
},
remove() {
this.todos.splice(this.index, 1);
},
clear() {
localStorage.clear();
}
},
watch: {
todos: {
handler(todos) {
store.save(todos);
},
deep: true
}
}
});
效果预览: