From ea40c8296a6d758c9e484537761f59bb31ae0833 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Thu, 29 Dec 2022 17:31:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=AD=A6=E4=B9=A01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 12_列表筛选/1.基本列表.html | 45 +++++++++++++++++++++++
 12_列表筛选/2.Key的原理.html | 55 +++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 12_列表筛选/1.基本列表.html
 create mode 100644 12_列表筛选/2.Key的原理.html
diff --git a/12_列表筛选/1.基本列表.html b/12_列表筛选/1.基本列表.html
new file mode 100644
index 0000000..0109ea9
--- /dev/null
+++ b/12_列表筛选/1.基本列表.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本列表</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+<!--    遍历列表-->
+    <h2>人员列表</h2>
+    <button @click.once="addPerson">添加一个人</button>
+    <ul>
+        <!--        方法一-->
+        <!--        <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
+        <!--        方法二-->
+        <li v-for="(data, index) in listData" :key="data.id">
+            {{data.name}} - {{data.age}}
+            <input type="text">
+        </li>
+
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            listData: [
+                {id: 1, name: '张三', age: 18},
+                {id: 2, name: '李四', age: 19},
+                {id: 3, name: '王五', age: 20}
+            ]
+        },
+        methods:{
+            addPerson() {
+                const p = {id: 0, name: "赵老大", age: 80}
+                this.listData.unshift(p)
+            }
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
diff --git a/12_列表筛选/2.Key的原理.html b/12_列表筛选/2.Key的原理.html
new file mode 100644
index 0000000..6836912
--- /dev/null
+++ b/12_列表筛选/2.Key的原理.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本列表</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+<!--    遍历列表-->
+    <h2>人员列表</h2>
+    <ul>
+        <!--        方法一-->
+        <!--        <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
+        <!--        方法二-->
+        <li v-for="(data, index) in listData" :key="index">{{data.name}} - {{data.age}}</li>
+    </ul>
+<!--        遍历对象-->
+    <h2>汽车信息</h2>
+    <ul>
+        <li v-for="(key, value) of car" :key="key">{{key}} - {{value}}</li>
+    </ul>
+<!--        遍历字符串-->
+    <h2>字符串信息</h2>
+    <ul>
+        <li v-for="(c, index) of testStr" :key="index">{{c}} - {{index}}</li>
+    </ul>
+<!--        遍历固定次数-->
+    <h2>固定遍历</h2>
+    <ul>
+        <li v-for="(number, index) of 5" :key="index">{{number}} - {{index}}</li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            listData: [
+                {id: 1, name: '张三', age: 18},
+                {id: 2, name: '李四', age: 19},
+                {id: 3, name: '王五', age: 20}
+            ],
+            car: {
+                name: "特斯拉",
+                model: "Model3",
+                price: "29.9w"
+            },
+            testStr: "Hello!"
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
