保存进度！

2022-10-21 19:03:12 +08:00
parent a963a76d01
commit c768a04b90
4 changed files with 208 additions and 5 deletions
--- a/code/web/car_dealer/vue/todo-lilst.html
+++ b/code/web/car_dealer/vue/todo-lilst.html
@@ -0,0 +1,88 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-10-21 16:36:51
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-21 19:02:01
+ * @FilePath: \car_dealer\vue\todo-lilst.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!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>
+    <body>
+        <div id="app">
+            <div class="content">
+                <h1>{{title}}</h1>
+                <div class="border">
+                    <div class="add_todo">
+                        <input type="text" placeholder="请输入待办事项" />
+                        <button type="button">添加</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)">
+                                修改
+                            </button>
+                            <button type="button">删除</button>
+                        </div>
+                    </div>
+                    <div class="tools"></div>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script>
+        const app = {
+            data() {
+                return {
+                    title: "待办任务",
+                    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 },
+                    ],
+                };
+            },
+            methods: {
+                addTodo() {},
+                editTodo(index) {
+                    console.log(index);
+
+                    this.todo_list[index].edit = !this.todo_list[index].edit;
+                },
+            },
+            computed: {
+                buttonText(edit) {
+                    return edit ? 修改 : 保存;
+                },
+            },
+        };
+
+        const vm = Vue.createApp(app);
+        vm.mount("#app");
+    </script>
+</html>