App.vue

 
<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";
 
export default {
  name: "App",
  data() {
    return {
      todos: [
        { id: 1, name: "vue", done: true },
        { id: 2, name: "react", done: false },
        { id: 3, name: "html", done: true },
        { id: 4, name: "java", done: false },
      ],
    };
  },
  methods: {
    //添加 修改 删除数据  需要在app里面定义方法
    addTodo(name) {
      const item = { id: new Date().getTime(), name, done: false };
      this.todos.unshift(item);
    },
    delTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    //修改状态
    editDone(id) {
      this.todos.forEach((item) => {
        if (item.id == id) {
          item.done = !item.done;
        }
      });
    },
    //全选/全不选
    editAll(checked) {
      this.todos.forEach((item) => {
        item.done = checked;
      });
    },
    delAll() {
      this.todos = this.todos.filter((item) => {
        return item.done != true;
      });
    },
  },
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
};
script>
 
<style>
* {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.main {
  width: 600px;
  margin: auto;
}
.btn {
  position: absolute;
  right: 0px;
  background: red;
  color: #fff;
  width: 90px;
  height: 33px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: none;
}
 
/* list样式 */
.list {
  border: 1px solid #999999;
  padding: 15px;
  margin-top: 15px;
}
.list li {
  height: 40px;
  line-height: 40px;
  color: #666;
  border-bottom: 1px solid #999999;
  position: relative;
}
.list li .btn {
  top: 2px;
}
 
.list li:hover .btn {
  display: block;
}
 
/* 底部 */
.footer {
  border: 1px solid #999999;
  padding: 15px;
  margin-top: 15px;
  position: relative;
}
.footer .btn {
  display: block;
  padding: 10px 20px;
  width: auto;
  height: auto;
  padding-bottom: 9px;
  top: 6px;
  right: 5px;
}
style>

main.js

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

 TodoHeader.vue

 
<script>
 
	export default {
		name:"TodoHeader",
		props:["addTodo"],
		methods: {
			pressAdd(e) {
				this.addTodo(e.target.value);
			}
		},
	}
script>
 
<style>
	/* 头部文件 */
	.header{
		border: 1px solid #999999;
		padding: 15px;
	}
	.header input{
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
style>

TodoList.vue

 
<script>
	import Item from './Item.vue';
	
	export default {
		name:"TodoList",
		props:["todos","delTodo","editDone"],
		mounted(){
			// console.log(this.todos);
		},
		components:{
			Item
		}
		
	}
script>
 
<style>
style>

TodoFooter.vue

 
<script>
	export default {
		name:"TodoFooter",
		props:["todos","editAll","delAll"],
		computed: {
			alltodo() {
				return this.todos.length; 
			},
			alldone(){
				//累加勾选的任务
				return  this.todos.reduce((total,current)=>{
					return total + (current.done?1:0);
				},0);//0为初始值
			},
			//勾选状态
			checkall(){
				return this.alldone!=0 && this.alltodo==this.alldone;
			}
		},
		methods:{
			changeAll(e){
				// console.log(e.target.checked);
				this.editAll(e.target.checked);
			},
			pressDelAll(){
				this.delAll();
			}
		}
	}
script>
 
<style>
style>

Item.vue

 
<script>
	export default{
		name:"Item",
		props:["item","delTodo","editDone"],
		
		methods:{
			pressDel(id){
				this.delTodo(id);//调用父组件回调函数 并传递id
			}
		},
		computed:{
			   changedone:{
				   //得到的值调用
				   get(){
					   return this.item.done;
				   },
				   //设置值的时候调用
				   set(done){
					   // console.log(this.item.id);
					   this.editDone(this.item.id);
				   }
			   }
		}
	}
script>
 
<style>
style>