码迷,mamicode.com
首页 > 其他好文 > 详细

(尚029)Vue_案例_交互footer组件功能

时间:2019-12-16 19:38:38      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:技术   alt   todo   com   哪些   标签   问题   font   属性   

 需要实现界面截图:

技术图片

 

 

 技术图片

 

 

 1.想到问题:

一旦写一个组件,需要接收哪些属性??

因为只有属性确定了,标签才好写

todos属性可以确定三个方面的显示

技术图片

 

 

 

2.做交互("删除已完成任务":接收一个函数)

技术图片

 

 

 3.在App.vue中改标签

传:todos和两个函数

技术图片

 

 

 4.在methods中定义两个函数

  //删除全部已完成任务,要不要参数?怎样判断?
//判断做这个事情有没有条件,假如我不传参数,能不能搞定
//说白了 {title:‘吃饭‘,complete:false}{title:‘睡觉‘,complete:true},{title:‘coding‘,complete:false}
//从中找出为true的干掉
//所以需要用到过滤,留下false
deleteCcompleteTodos(){
//过滤产生的新的数组要赋值给以前的this.todos=
this.todos=this.todos.filter(todo=>!todo.complete)
},
//全选/全不选,要把所有的complete值要改成true/false
//你要告诉我是全选还是全不选
//遍历项目中所有的todos,需要更改complete的状态
selectAllTodos(check){
this.todos.forEach(todo=>todo.complete=check)
}
},

(尚029)Vue_案例_交互footer组件功能

标签:技术   alt   todo   com   哪些   标签   问题   font   属性   

原文地址:https://www.cnblogs.com/curedfisher/p/12050414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!