【IMWeb训练营作业1】-TodoList
2017-04-19 11:35
781 查看
主要的Vue函数代码:
最终运行效果图:
var vm = new Vue({ el:'.main', data:{ list:list, todo:'', edtorTodos:'', beforeTitle:'', visibility:'all' }, methods:{ addTodo(){ this.list.push({ title:this.todo, isChecked:false }); this.todo = ''; }, deleteTodo(todo){ var index = this.list.indexOf(todo); this.list.splice(index,1); }, edtorTodo(todo){ this.beforeTitle = todo.title; this.edtorTodos = todo; }, edtorTodoed(todo){ this.edtorTodos = ''; }, cancelTodo(todo){ todo.title = this.beforeTitle; this.beforeTitle = ''; this.edtorTodos = ''; } }, directives:{ 'focus':{ update(el,binding){ if(binding.value){ el.focus(); } } } }, computed:{ noCheckLength:function () { return this.list.filter(function(item){ return !item.isChecked; }).length }, filteredList:function () { return filter[this.visibility] ? filter[this.visibility](list) : list; } }, watch:{ list:{ handler:function () { store.save("miaov-new-class", this.list); }, deep:true } } });
最终运行效果图:
相关文章推荐
- 【IMWeb训练营作业】ToDoList
- 【IMWeb训练营作业】Todolist
- 【IMWeb训练营作业】vue-Todolist
- 【IMWeb训练营作业】TodoList
- 【IMWeb训练营作业】我的第一次作业---todoList
- 【IMWeb训练营作业】Vue做的TODOlist
- [IMWeb训练营作业]TodoList
- 【IMWeb训练营作业】Vue TodoList Demo
- 【IMWeb训练营作业】Todolist,没有用视频的例子
- 【IMWeb训练营作业】 vue练习-todoList
- 【IMWeb训练营作业】基于Vue的简易todolist
- 【IMWeb训练营作业】【Vue】TodoList
- [IMWeb训练营作业]TodoList 20170419
- IMWeb训练营作业1-todolist
- 【IMWeb训练营作业】vue demo Todolist
- 【IMWeb训练营作业】--Vue-TODOList
- 【IMWeb训练营作业】todolist
- 【IMWeb训练营作业】todoList
- [IMWeb训练营作业]Todolist
- 【IMWeb训练营作业】Todolist