Vue-todo(二)

Vue版本为v2.3.3，使用UI框架为bulma(v0.5.3)，使用LocalStorage实现本地存储
待实现的功能：拖拽、修改、删除

    

        

            
        
        

            clear
        
    
    
正在进行
    

        

            {{todo.title}}
    
    

    
已完成
    

        

            {{todo.title}}
    

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
        }
    }
});

效果预览：