您的位置:首页 > 产品设计 > UI/UE

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


最终运行效果图:





内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  vue-js