学习v-for创建列表！

2022-05-24 15:29:00 +08:00 · 2022-05-24 15:29:00 +08:00 · 28b0a0ba00
commit 28b0a0ba00
parent ba6705a97b
2 changed files with 43 additions and 2 deletions
--- a/入门/入门.html
+++ b/入门/入门.html
@ -0,0 +1,41 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-05-20 10:20:42
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-05-20 15:14:26
+ * @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>vue入门</title>
+        <link rel="stylesheet" href="../css/root.css" />
+        <link rel="stylesheet" href="../css/kane.css" />
+        <script src="https://unpkg.com/vue@next"></script>
+    </head>
+    <body>
+        <div id="root">{{message}}</div>
+    </body>
+    <script>
+        const vm = Vue.createApp({
+            data() {
+                return {
+                    message: "测试vue",
+                };
+            },
+            methods: {
+                reversedString(string) {
+                    return string.split("").reverse().join("");
+                },
+            },
+        });
+
+        vm.mount("#root");
+    </script>
+</html>
--- a/列表渲染/列表渲染.html
+++ b/列表渲染/列表渲染.html
@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2022-05-18 10:14:52
 * @LastEditors: Kane
- * @LastEditTime: 2022-05-18 10:38:14
+ * @LastEditTime: 2022-05-23 11:19:05
 * @FilePath: \vue.js学习\列表渲染\列表渲染.html
 * @Description: 
 * 
@ -24,7 +24,7 @@
            {{title}}
            <br />
            <ul>
-                <li v-for="person in personList" :key="person.id">
+                <li v-for="person in personList" v-bind:key="person.id">
                    姓名：{{person.name}}
                </li>
            </ul>