保存进度！

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>
--- a/code/web/car_dealer/vue/vue_01.html
+++ b/code/web/car_dealer/vue/vue_01.html
@@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2022-10-20 15:07:59
 * @LastEditors: Kane
- * @LastEditTime: 2022-10-21 11:47:35
+ * @LastEditTime: 2022-10-21 16:29:39
 * @FilePath: \car_dealer\vue\vue_01.html
 * @Description: 
 * 
@@ -32,8 +32,10 @@
                </button>
                <hr />
                <h1>测试列表渲染</h1>
+                <h3>员工数量：{{stuffCount}}</h3>
                <table>
-                    <tr v-for="stuff in stuff_list">
+                    <tr v-for="(stuff,index) in stuff_list" v-bind:key="index">
+                        <td>{{index+1}}</td>
                        <td>{{stuff.name}}</td>
                        <td>{{stuff.age}}</td>
                    </tr>
@@ -68,6 +70,11 @@
                    this.btn_title = this.btn_switch ? "走你！" : "滚";
                },
            },
+            computed: {
+                stuffCount() {
+                    return this.stuff_list.length;
+                },
+            },
        };

        const vm = Vue.createApp(app);