From 5db242ae0d8dc7845dc3e60538da6700f514bcce Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Fri, 30 Dec 2022 18:05:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=88=97=E8=A1=A8=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E7=9A=84=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ....基本列表.html => 1.基础列表.html} | 36 +++++----
 12_列表筛选/2.Key的原理.html           | 38 ++++------
 12_列表筛选/3.列表过滤.html           | 75 +++++++++++++++++++
 12_列表筛选/4.列表排序.html           | 55 ++++++++++++++
 4 files changed, 167 insertions(+), 37 deletions(-)
 rename 12_列表筛选/{1.基本列表.html => 1.基础列表.html} (50%)
 create mode 100644 12_列表筛选/3.列表过滤.html
 create mode 100644 12_列表筛选/4.列表排序.html
diff --git a/12_列表筛选/1.基本列表.html b/12_列表筛选/1.基础列表.html
similarity index 50%
rename from 12_列表筛选/1.基本列表.html
rename to 12_列表筛选/1.基础列表.html
index 0109ea9..6836912 100644
--- a/12_列表筛选/1.基本列表.html
+++ b/12_列表筛选/1.基础列表.html
@@ -9,16 +9,26 @@
 <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>
-
+        <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>
@@ -31,13 +41,13 @@
                 {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)
-            }
+            ],
+            car: {
+                name: "特斯拉",
+                model: "Model3",
+                price: "29.9w"
+            },
+            testStr: "Hello!"
         }
     })
 
diff --git a/12_列表筛选/2.Key的原理.html b/12_列表筛选/2.Key的原理.html
index 6836912..b9e6f09 100644
--- a/12_列表筛选/2.Key的原理.html
+++ b/12_列表筛选/2.Key的原理.html
@@ -2,33 +2,23 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>基本列表</title>
+    <title>Key的原理</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="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>
+        <li v-for="(data, index) in listData" :key="data.id">
+            {{data.name}} - {{data.age}}
+            <input type="text">
+        </li>
+
     </ul>
 </div>
 </body>
@@ -41,13 +31,13 @@
                 {id: 1, name: '张三', age: 18},
                 {id: 2, name: '李四', age: 19},
                 {id: 3, name: '王五', age: 20}
-            ],
-            car: {
-                name: "特斯拉",
-                model: "Model3",
-                price: "29.9w"
-            },
-            testStr: "Hello!"
+            ]
+        },
+        methods:{
+            addPerson() {
+                const p = {id: 0, name: "赵老大", age: 80}
+                this.listData.unshift(p)
+            }
         }
     })
 
diff --git a/12_列表筛选/3.列表过滤.html b/12_列表筛选/3.列表过滤.html
new file mode 100644
index 0000000..f1409c2
--- /dev/null
+++ b/12_列表筛选/3.列表过滤.html
@@ -0,0 +1,75 @@
+<!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>
+    <input type="text" placeholder="输入关键词" v-model="keyword">
+    <ul>
+        <li v-for="(data, index) in filterData" :key="data.id">
+            {{data.name}} - {{data.age}} - {{data.sex}}
+        </li>
+
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    // 使用watch实现
+    // const vm = new Vue({
+    //     el: "#root",
+    //     data: {
+    //         keyword: '',
+    //         listData: [
+    //             {id: 1, name: '马冬梅', age: 18, sex: '女'},
+    //             {id: 2, name: '周冬雨', age: 19, sex: '女'},
+    //             {id: 3, name: '周杰伦', age: 20, sex: '男'},
+    //             {id: 4, name: '温兆伦', age: 21, sex: '男'}
+    //         ],
+    //         filterData: []
+    //     },
+    //     watch: {
+    //         // keyword(val) {
+    //         //     this.listData = this.listData.filter((p) => {
+    //         //         return p.name.indexOf(val) !== -1
+    //         //     })
+    //         // }
+    //         keyword: {
+    //             immediate: true,
+    //             handler(val) {
+    //                 this.filterData = this.listData.filter((p) => {
+    //                     return p.name.indexOf(val) !== -1
+    //                 })
+    //             }
+    //         }
+    //     }
+    // })
+
+    // 使用computed实现
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            keyword: '',
+            listData: [
+                {id: 1, name: '马冬梅', age: 18, sex: '女'},
+                {id: 2, name: '周冬雨', age: 19, sex: '女'},
+                {id: 3, name: '周杰伦', age: 20, sex: '男'},
+                {id: 4, name: '温兆伦', age: 21, sex: '男'}
+            ],
+        },
+        computed: {
+            filterData() {
+                return this.listData.filter((p) => {
+                    return p.name.indexOf(this.keyword) !== -1
+                })
+            }
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
diff --git a/12_列表筛选/4.列表排序.html b/12_列表筛选/4.列表排序.html
new file mode 100644
index 0000000..f859b22
--- /dev/null
+++ b/12_列表筛选/4.列表排序.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>
+    <input type="text" placeholder="输入关键词" v-model="keyword">
+    <button @click="sortType=2">年龄升序</button>
+    <button @click="sortType=1">年龄降序</button>
+    <button @click="sortType=0">原顺序</button>
+    <ul>
+        <li v-for="(data, index) in filterData" :key="data.id">
+            {{data.name}} - {{data.age}} - {{data.sex}}
+        </li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+
+    // 使用computed实现
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            keyword: '',
+            sortType: 0,  // 0-原顺序 1-年龄降序 2-年龄升序
+            listData: [
+                {id: 1, name: '马冬梅', age: 25, sex: '女'},
+                {id: 2, name: '周冬雨', age: 19, sex: '女'},
+                {id: 3, name: '周杰伦', age: 20, sex: '男'},
+                {id: 4, name: '温兆伦', age: 17, sex: '男'}
+            ],
+        },
+        computed: {
+            filterData() {
+                const arr = this.listData.filter((p) => {
+                    return p.name.indexOf(this.keyword) !== -1
+                })
+                if (this.sortType){
+                    arr.sort((a,b) => {
+                        return this.sortType === 1 ? b.age - a.age : a.age - b.age
+                    })
+                }
+                return arr
+            }
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
