From b0f9f4e48dd214a09d8295951e682a0f9b7577e5 Mon Sep 17 00:00:00 2001
From: Kane Wang <wangkane@qq.com>
Date: Tue, 25 Oct 2022 18:01:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/web/car_dealer/vue/todo-list.html | 384 +++++++++++++------------
 1 file changed, 203 insertions(+), 181 deletions(-)
diff --git a/code/web/car_dealer/vue/todo-list.html b/code/web/car_dealer/vue/todo-list.html
index 8bb5442..a9a7124 100644
--- a/code/web/car_dealer/vue/todo-list.html
+++ b/code/web/car_dealer/vue/todo-list.html
@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-10-21 16:36:51
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-23 15:22:51
+ * @LastEditTime: 2022-10-25 14:21:00
  * @FilePath: \car_dealer\vue\todo-list.html
  * @Description: 
  * 
@@ -10,195 +10,217 @@
 -->
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>待办任务</title>
+        <link rel="stylesheet" href="../css/root.css" />
+        <link rel="stylesheet" href="../css/normalize.css" />
+        <link rel="stylesheet" href="../css/kane.css" />
+        <link rel="stylesheet" href="../css/todo-list/to-list.css" />
+        <script src="../js/vue/vue.global.js"></script>
+    </head>
 
-<head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>待办任务</title>
-    <link rel="stylesheet" href="../css/root.css" />
-    <link rel="stylesheet" href="../css/normalize.css" />
-    <link rel="stylesheet" href="../css/kane.css" />
-    <link rel="stylesheet" href="../css/todo-list/to-list.css" />
-    <script src="../js/vue/vue.global.js"></script>
-</head>
-
-<body>
-    <div id="app">
-        <div id="message_border">
-            <div class="message_box">
-                <span>{{errorMessage}}</span>
-                <button type="button" @click="closeMessageBox()">关闭</button>
-            </div>
-        </div>
-        <div class="content">
-            <h1>{{title}}</h1>
-            <div class="border">
-                <div class="add_todo">
-                    <input type="text" placeholder="请输入待办事项" />
-                    <button type="button" @click="showMessageBox()">添加</button>
+    <body>
+        <div id="app">
+            <div id="message_border">
+                <div class="message_box">
+                    <span>{{errorMessage}}</span>
+                    <button type="button" @click="closeMessageBox()">
+                        关闭
+                    </button>
                 </div>
-                <hr>
-                <div class="todo_list">
-                    <div v-for="(item,index) in todo_list" :key="index">
-                        <input type="checkbox" v-model="todo_list[index].selected" />
-                        <span v-show="!item.edit">{{item.todo_text}}</span>
-                        <input type="text" v-show="item.edit" v-model="item.todo_text" />
-                        <button type="button" v-on:click="editTodo(index,event)">
-                            修改
+            </div>
+            <div class="content">
+                <h1>{{title}}</h1>
+                <div class="border">
+                    <div class="add_todo">
+                        <input
+                            type="text"
+                            v-model="todo_text"
+                            placeholder="请输入待办事项"
+                        />
+                        <button type="button" @click="showMessageBox()">
+                            添加
                         </button>
-                        <button type="button" @click="removeTodo(index)">删除</button>
+                    </div>
+                    <hr />
+                    <div class="todo_list">
+                        <div v-for="(item,index) in todo_list" :key="index">
+                            <input
+                                type="checkbox"
+                                v-model="todo_list[index].selected"
+                            />
+                            <span v-show="!item.edit">{{item.todo_text}}</span>
+                            <input
+                                type="text"
+                                v-show="item.edit"
+                                v-model="item.todo_text"
+                            />
+                            <button
+                                type="button"
+                                v-on:click="editTodo(index,event)"
+                            >
+                                修改
+                            </button>
+                            <button type="button" @click="removeTodo(index)">
+                                删除
+                            </button>
+                        </div>
+                    </div>
+                    <hr />
+                    <div class="tools">
+                        <p class="summary">总计：{{todo_list.length}}</p>
                     </div>
                 </div>
-                <hr>
-                <div class="tools">
-                    <p class="summary">总计：{{todo_list.length}}</p>
-                </div>
             </div>
         </div>
-    </div>
-
-</body>
-<script>
-    const app = {
-        data() {
-            return {
-                title: "待办任务",
-                errorMessage: "奇怪的错误！",
-                todo_list: [{
-                        selected: false,
-                        todo_text: "回家",
-                        edit: false
-                    },
-                    {
-                        selected: true,
-                        todo_text: "吃饭",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "洗澡",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "玩游戏",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "回家",
-                        edit: false
-                    },
-                    {
-                        selected: true,
-                        todo_text: "吃饭",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "洗澡",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "玩游戏",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "回家",
-                        edit: false
-                    },
-                    {
-                        selected: true,
-                        todo_text: "吃饭",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "洗澡",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "玩游戏",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "回家",
-                        edit: false
-                    },
-                    {
-                        selected: true,
-                        todo_text: "吃饭",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "洗澡",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "玩游戏",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "回家",
-                        edit: false
-                    },
-                    {
-                        selected: true,
-                        todo_text: "吃饭",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "洗澡",
-                        edit: false
-                    },
-                    {
-                        selected: false,
-                        todo_text: "玩游戏",
-                        edit: false
-                    },
-                ],
-            };
-        },
-        methods: {
-            addTodo() {},
-            editTodo(index, event) {
-                console.log(index);
-                console.log(event);
-
-                this.todo_list[index].edit = !this.todo_list[index].edit;
+    </body>
+    <script>
+        const app = {
+            data() {
+                return {
+                    title: "待办任务",
+                    errorMessage: "奇怪的错误！",
+                    todo_text: "",
+                    todo_list: [
+                        {
+                            selected: false,
+                            todo_text: "回家",
+                            edit: false,
+                        },
+                        {
+                            selected: true,
+                            todo_text: "吃饭",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "洗澡",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "玩游戏",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "回家",
+                            edit: false,
+                        },
+                        {
+                            selected: true,
+                            todo_text: "吃饭",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "洗澡",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "玩游戏",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "回家",
+                            edit: false,
+                        },
+                        {
+                            selected: true,
+                            todo_text: "吃饭",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "洗澡",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "玩游戏",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "回家",
+                            edit: false,
+                        },
+                        {
+                            selected: true,
+                            todo_text: "吃饭",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "洗澡",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "玩游戏",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "回家",
+                            edit: false,
+                        },
+                        {
+                            selected: true,
+                            todo_text: "吃饭",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "洗澡",
+                            edit: false,
+                        },
+                        {
+                            selected: false,
+                            todo_text: "玩游戏",
+                            edit: false,
+                        },
+                    ],
+                };
             },
-            removeTodo(index) {
-                this.todo_list.splice(index, 1);
+            methods: {
+                addTodo() {},
+                editTodo(index, event) {
+                    console.log(index);
+                    console.log(event);
+
+                    this.todo_list[index].edit = !this.todo_list[index].edit;
+                },
+                removeTodo(index) {
+                    this.todo_list.splice(index, 1);
+                },
+                showMessageBox() {
+                    const message = document.getElementById("message_border");
+
+                    message.style["display"] = "flex";
+                },
+                closeMessageBox() {
+                    const message = document.getElementById("message_border");
+
+                    message.style["display"] = "none";
+                },
             },
-            showMessageBox() {
-                const message = document.getElementById("message_border");
-
-                message.style["display"] = "flex";
+            computed: {
+                buttonText(edit) {
+                    return edit ? 修改 : 保存;
+                },
             },
-            closeMessageBox() {
-                const message = document.getElementById("message_border");
-
-                message.style["display"] = "none";
-            }
-        },
-        computed: {
-            buttonText(edit) {
-                return edit ? 修改 : 保存;
+            mounted() {
+                console.log("挂载完成！");
             },
-        },
-    };
+        };
 
-    const vm = Vue.createApp(app);
-    vm.mount("#app");
-</script>
-
-</html>
\ No newline at end of file
+        const vm = Vue.createApp(app);
+        vm.mount("#app");
+    </script>
+</html>
