参考我的上一篇文章：
1.实现页面
2.实现技术：
-
组件模块化思想
-
父组组件之间的数据双向传递（porps、this.$emit)
同理：
- 使用stylus语法对css样式进行编译（实现css样式的模块化、优化代码结构，将具有共同样式的css代码组装起来，组装成函数，需要时直接引入调用即可）
-
- 使用watch实现对数据的监听
watch: {
todoData: {
deep: true,
handler() {
this.total = this.todoData.filter((v) => v.complete == false).length
},
},
},`
- 使用computed实现对数据的计算，实现过滤显示效果
computed: {
filterData() {
switch (this.filter) {
case "all":
return this.todoData
break
case "active":
return this.todoData.filter((v) => v.complete == false)
break
case "completed":
return this.todoData.filter((v) => v.complete == true)
break
}
},
},
显示：（todoData-----> filterData）
<main-item
v-for="(item, index) in filterData"
:key="index"
:todo="item"
@del="deleteItem"
- js部分
1）.使用.unshift()实现向数组中添加元素（这里添加向数组添加的元素为对象类型）
this.todoData.unshift({
id: id++,
content: this.content,
complete: false,
})
2）使用.filter(v=>条件)实现对数组过滤，即筛选出符合条件的元素
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
