开始学习！

2022-05-18 15:42:14 +08:00
commit e5ad9e12cc
8 changed files with 24528 additions and 0 deletions
--- a/列表渲染/列表渲染.html
+++ b/列表渲染/列表渲染.html
@@ -0,0 +1,50 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-05-18 10:14:52
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-05-18 10:38:14
+ * @FilePath: \vue.js学习\列表渲染\列表渲染.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>Document</title>
+        <link rel="stylesheet" href="../css/root.css" />
+        <link rel="stylesheet" href="../css/kane.css" />
+        <script src="../vue/vue.js"></script>
+    </head>
+    <body>
+        <div id="root">
+            {{title}}
+            <br />
+            <ul>
+                <li v-for="person in personList" :key="person.id">
+                    姓名：{{person.name}}
+                </li>
+            </ul>
+        </div>
+    </body>
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: "#root",
+            data: {
+                title: "学习vue!",
+                personList: [
+                    { id: "001", name: "张三", age: 18 },
+                    { id: "002", name: "李四", age: 19 },
+                    { id: "003", name: "王五", age: 20 },
+                    { id: "004", name: "xxx", age: 21 },
+                    { id: "005", name: "kkk", age: 22 },
+                ],
+            },
+        });
+    </script>
+</html>