style:fmt

todos/src/App.vue

@@ -1,33 +1,33 @@
 <script>
-import TodoHeader from './components/TodoHeader.vue'
+import TodoHeader from "./components/TodoHeader.vue";
-import TodoList from './components/TodoList.vue'
+import TodoList from "./components/TodoList.vue";
-import TodoFooter from './components/TodoFooter.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
+      if (this.tabType === 0) return this.todos;
-      const type = this.tabType
+      const type = this.tabType;
-      return this.todos.filter(item => {
+      return this.todos.filter((item) => {
-        if (type === 1) return !item.completed
+        if (type === 1) return !item.completed;
-        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>

todos/src/components/TodoFooter.vue

@@ -16,10 +16,10 @@ export default {
 
   methods: {
     tabClick(newType) {
-      this.$emit("changeTabType", newType)
+      this.$emit("changeTabType", newType);
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>

todos/src/components/TodoHeader.vue

@@ -3,7 +3,11 @@
     <h1>待办事项</h1>
 
     <div class="input-wrapper">
-      <input placeholder="请输入您的待办事项，按下回车后即可添加" v-model.trim="newTodo" @keyup.enter="addNewTodo" />
+      <input
+        placeholder="请输入您的待办事项，按下回车后即可添加"
+        v-model.trim="newTodo"
+        @keyup.enter="addNewTodo"
+      />
     </div>
 
     <p v-show="isShowMsg" style="color: red">
@@ -55,34 +59,31 @@ p {
 </style>
 
 <script>
-const WORD_COUNT_LIMIT = 50
+const WORD_COUNT_LIMIT = 50;
 
 export default {
   data() {
     return {
       newTodo: "",
-      countLimit: WORD_COUNT_LIMIT
+      countLimit: WORD_COUNT_LIMIT,
-    }
+    };
   },
 
   computed: {
     isShowMsg() {
-      return this.newTodo.length > WORD_COUNT_LIMIT
+      return this.newTodo.length > WORD_COUNT_LIMIT;
-    }
+    },
   },
 
   methods: {
     addNewTodo() {
-      if (
+      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
-        this.newTodo.length === 0 ||
+        return;
-        this.newTodo.length > WORD_COUNT_LIMIT
-      ) {
-        return
       }
 
-      this.$emit("addTodo", this.newTodo)
+      this.$emit("addTodo", this.newTodo);
-      this.newTodo = ""
+      this.newTodo = "";
-    }
+    },
-  }
+  },
-}
+};
 </script>

todos/src/components/TodoList.vue

@@ -99,8 +99,9 @@ export default {
 
   methods: {
     delTodo(item) {
-      this.$emit("delTodo", item)
+      this.$emit("delTodo", item);
-    }
+    },
-  }
+  },
-}
+};
-</script>
+</script>
+

todos/src/main.js

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import './assets/global.css'
+import "./assets/global.css";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");

todos/src/style.css

@@ -81,4 +81,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}

todos/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
-})
+});