style:fmt

todos/src/App.vue

@@ -1,33 +1,33 @@
 <script>
-import TodoHeader from './components/TodoHeader.vue'
-import TodoList from './components/TodoList.vue'
-import TodoFooter from './components/TodoFooter.vue'
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoFooter from "./components/TodoFooter.vue";
 
 export default {
   components: {
     TodoHeader,
     TodoList,
-    TodoFooter
+    TodoFooter,
   },
 
   data() {
     return {
       // 从 localStorage 初始化
       todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
-      tabType: 0 // 0全部 1未完成 2已完成
-    }
+      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
-      })
-    }
+      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: {
@@ -36,34 +36,38 @@ export default {
       this.todos.push({
         id: Date.now(),
         txt: newTodo,
-        completed: false
-      })
+        completed: false,
+      });
     },
 
     // 删除待办
     delTodo(item) {
-      this.todos = this.todos.filter(t => t.id !== item.id)
+      this.todos = this.todos.filter((t) => t.id !== item.id);
     },
 
     changeTabType(type) {
-      this.tabType = type
-    }
+      this.tabType = type;
+    },
   },
 
   // 深度监听 — 自动写入 localStorage
   watch: {
     todos: {
       handler(todos) {
-        localStorage.setItem("vue-todos", JSON.stringify(todos))
+        localStorage.setItem("vue-todos", JSON.stringify(todos));
       },
-      deep: true
-    }
-  }
-}
+      deep: true,
+    },
+  },
+};
 </script>
 
 <template>
   <TodoHeader @addTodo="addTodo" />
   <TodoList :todos="todoList" @delTodo="delTodo" />
-  <TodoFooter :count="todoList.length" :tabType="tabType" @changeTabType="changeTabType" />
+  <TodoFooter
+    :count="todoList.length"
+    :tabType="tabType"
+    @changeTabType="changeTabType"
+  />
 </template>