保存进度！

2022-11-22 17:27:13 +08:00
parent af1205ffed
commit 82877012c9
9 changed files with 19384 additions and 43 deletions
--- a/入门/动画/列表动画.html
+++ b/入门/动画/列表动画.html
@@ -0,0 +1,62 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-22 17:10:33
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-22 17:23:34
+ * @FilePath: \vue-learning\入门\动画\列表动画.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/app.css" />
+        <link rel="stylesheet" href="css/main.css" />
+    </head>
+    <body>
+        <div id="app">
+            <div class="content">
+                <h1>{{title}}</h1>
+                <button type="button" @click="addItem()">添加元素</button>
+                <hr />
+                <transition-group name="list">
+                    <div v-for="(item,key) in items" :key="key">
+                        姓名：{{item.name}} 年龄：{{item.age}}
+                        性别：{{item.gender}}
+                    </div>
+                </transition-group>
+            </div>
+        </div>
+    </body>
+    <script src="../../js/vue/vue.global.js"></script>
+    <script>
+        const app = {
+            data() {
+                return {
+                    title: "列表动画",
+                    items: [
+                        { name: "1", age: 20, gender: "男" },
+                        { name: "2", age: 20, gender: "男" },
+                        { name: "3", age: 20, gender: "男" },
+                        { name: "5", age: 20, gender: "男" },
+                    ],
+                };
+            },
+            methods: {
+                addItem() {
+                    this.items.push({ name: "老王", age: 20, gender: "男" });
+                },
+            },
+        };
+
+        const vm = Vue.createApp(app);
+        vm.mount("#app");
+    </script>
+</html>