app
<template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"></MyHeader> <MyList :todos="todos" :checkTodo="checkTodo" :deletTodo="deletTodo"></MyList> <MyFooter :todos="todos" :chackAllTodo="chackAllTodo" :clearAllTodo="clearAllTodo"></MyFooter> </div> </div> </div> </template> <script> import MyFooter from './components/MyFooter.vue' import MyHeader from './components/MyHeader.vue' // import MyItem from './components/MyItem.vue' item为list的子组件 import MyList from './components/MyList.vue' // import School from './components/School.vue' export default { name: 'app', components: { MyHeader, MyFooter, // MyItem, MyList // School }, data() { return { todos:[ {id:"001",title:"吃饭",done:true}, {id:"002",title:"抽烟",done:false}, {id:"003",title:"烫头",done:true}, ] } }, methods: { //添加一个toido addTodo(todoObj){ this.todos.unshift(todoObj) }, // 勾选或者取消勾选 checkTodo(id){ this.todos.forEach((todo) => { if (todo.id===id) { todo.done=!todo.done; } }); }, // 删除一个todo deletTodo(id){ this.todos=this.todos.filter((todo)=>{ return todo.id!==id }) }, // 全选或者全不选 chackAllTodo(done){ this.todos.forEach((todo )=> { todo.done=done }); }, // 清除所有已完成的todo clearAllTodo(){ this.todos=this.todos.filter( (todo)=>{ return !todo.done } ) } }, } </script> <style> /*base*/ body { background: #fff; } .btn { /* display: inline-block; */ padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-edit { color: #fff; background-color: lightgreen; border: 1px solid green; margin-right: 5px; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn-edit:hover { color: #fff; background-color: green; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>
footer
<template> <div class="todo-footer" v-show="todos.length"> <label> <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --> <input type="checkbox" v-model="isAll"/> </label> <span> <span>已完成{{doneTotal}}</span> / 全部{{todos.length}} </span> <button class="btn btn-danger" @click="claerAll">清除已完成任务</button> </div> </template> <script> export default { name:"MyFooter", props:[ "todos", "chackAllTodo", "clearAllTodo" ], computed:{ doneTotal(){ // const x=this.todos.reduce( // (pre,current)=>{ // return pre+(current?1:0) // }, // 0 // ) // return x return this.todos.reduce((pre,todo)=> pre+(todo.done?1:0),0) }, // isAll(){ // return this.doneTotal===this.todos.length && this.todos.length>0 // } isAll:{ get(){ return this.doneTotal===this.todos.length && this.todos.length>0 }, set(value){ // console.log(value); this.chackAllTodo(value) } } }, methods: { // checkAll(e){ // //全选或者全不选 // this.chackAllTodo(e.target.checked) // } claerAll(){ this.clearAllTodo() } }, } </script> <style> /*footer*/ .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -1px; vertical-align: middle; margin-right: 5px; } .todo-footer button { float: right; margin-top: 5px; } </style>