我自己写todolist的时候,做已完成和未完成筛选的时候&＃xff0c;发现用计算属性只能执行一次&＃xff0c;再就动不了了。
下面的代码是把filterlists放到方法里面&＃xff0c;就可以用了&＃xff0c;但是放到计算里面就只执行一次。
计算属性不是依赖有更新&＃xff0c;自己就会更新吗。
vue-todolist
{{uptime}}
mylist-todo
{{item.text}}
×
{{item.addtime}}
export default {
data(){
return{
newtodo:&＃39;&＃39;,
lists:[],
compoleted:false,
notyet:false
}
},
props:{
uptime:{
type:String
}
},
methods:{
addlist(){
if(this.newtodo){
this.lists.push({
text:this.newtodo.trim(),
ischeck:false,
addtime:this.uptime
});
this.newtodo&＃61;&＃39;&＃39;;
}
},
dellist(thisdata){
this.lists.splice(this.lists.indexOf(thisdata),1);
},
myall(){
this.completed&＃61;false;
this.notyet&＃61;false;
},
mycom(){
this.completed&＃61;true;
this.notyet&＃61;false;
},
mynot(){
this.completed&＃61;false;
this.notyet&＃61;true;
},
filterlists:function(){
if(this.completed){
return this.lists.filter(function(todo){
return todo.ischeck
})
}else if(this.notyet){
return this.lists.filter(function(todo){
return !todo.ischeck
})
}else{
return this.lists;
}
}
},
computed:{
}
}
这是页面效果
![]()
京公网安备 11010802041100号