(160条消息) Todo-List案例版本一_bubbleJessica的博客-CSDN博客

引入了localStorage，让案例更加完善

src/App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addToDo="addToDo" /><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" /><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" /></div></div></div>
</template><script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter'export default {name: 'App',data() {return {// 由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos: JSON.parse(localStorage.getItem('todos')) || []}},components: { MyHeader, MyList, MyFooter },methods: {// 添加一个todoaddToDo(todoObj) {this.todos.unshift(todoObj)},// 勾选or取消勾选一个todocheckTodo(id) {this.todos.forEach((todo) => {if (todo.id === id) todo.done = !todo.done})},// 删除一个tododeleteTodo(id) {// 注意:filter不改变原数组，只是新建一个数组this.todos = this.todos.filter((todo) => {return todo.id !== id})},// 全选or取消全选checkAllTodo(done) {this.todos.forEach((todo) => {todo.done = done})},// 清除所有已完成的todoclearAllTodo() {this.todos = this.todos.filter((todo) => {return !todo.done})}},watch: {// todos简写不包含深度监视// todos(value) {//     localStorage.setItem('todos', JSON.stringify(value))// }// todos完整版深度监视todos:{deep:true,handler(value){localStorage.setItem('todos', JSON.stringify(value))}}}
}
</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-danger:hover {color: #fff;background-color: #bd362f;
}.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>