project:todo

todos/src/App.vue

@@ -0,0 +1,80 @@
+<script>
+import TodoHeader from './components/TodoHeader.vue'
+import TodoList from './components/TodoList.vue'
+import TodoFooter from './components/TodoFooter.vue'
+
+export default {
+  components: {
+    TodoHeader,
+    TodoList,
+    TodoFooter
+  },
+
+  data() {
+    return {
+      // 从 localStorage 初始化
+      todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
+      tabType: 0 // 0全部 1未完成 2已完成
+    }
+  },
+
+  computed: {
+    // 筛选后的列表
+    todoList() {
+      if (this.tabType === 0) return this.todos
+      const type = this.tabType
+      return this.todos.filter(item => {
+        if (type === 1) return !item.completed
+        return item.completed
+      })
+    }
+  },
+
+  methods: {
+    // 添加待办
+    addTodo(newTodo) {
+      this.todos.push({
+        id: Date.now(),
+        txt: newTodo,
+        completed: false
+      })
+    },
+
+    // 删除待办
+    delTodo(item) {
+      this.todos = this.todos.filter(t => t.id !== item.id)
+    },
+
+    changeTabType(type) {
+      this.tabType = type
+    }
+  },
+
+  // 深度监听 — 自动写入 localStorage
+  watch: {
+    todos: {
+      handler(todos) {
+        localStorage.setItem("vue-todos", JSON.stringify(todos))
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<template>
+  <TodoHeader @addTodo="addTodo" />
+  <TodoList :todos="todoList" @delTodo="delTodo" />
+  <TodoFooter :count="todoList.length" :tabType="tabType" @changeTabType="changeTabType" />
+</template>
+
+<style>
+#app {
+  width: 600px;
+  margin: 50px auto;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  background: white;
+}
+</style>