From 9397c45b87ba78d778027a433d168eba11a6cbde Mon Sep 17 00:00:00 2001
From: Kane Wang <wangkane@qq.com>
Date: Wed, 25 May 2022 19:26:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E8=BF=9B=E5=BA=A6=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 列表过滤/列表过滤.html | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/列表过滤/列表过滤.html b/列表过滤/列表过滤.html
index e7831fe..4f79f5e 100644
--- a/列表过滤/列表过滤.html
+++ b/列表过滤/列表过滤.html
@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2022-05-24 21:47:36
  * @LastEditors: Kane
- * @LastEditTime: 2022-05-24 22:12:10
- * @FilePath: \vue学习\列表过滤\列表过滤.html
+ * @LastEditTime: 2022-05-25 11:01:43
+ * @FilePath: \vue.js学习\列表过滤\列表过滤.html
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -27,7 +27,7 @@
             <fieldset title="过滤">
                 <legend>&nbsp;过滤&nbsp;</legend>
                 <label for=""
-                    >姓名：<input type="text" v-on:keydown.enter="filteName();"
+                    >姓名：<input type="text" v-model:value="nameFilter"
                 /></label>
                 <label
                     >性别：
@@ -39,7 +39,7 @@
                 </label>
             </fieldset>
             <ul>
-                <li v-for="person in personsList" v-bind:key="person.id">
+                <li v-for="person in filteredPersonList" v-bind:key="person.id">
                     姓名：{{person.name}} - 性别：{{person.sex}} -
                     年龄：{{person.age}}
                 </li>
@@ -58,12 +58,20 @@
                     { id: "003", name: "周杰伦", sex: "男", age: 33 },
                     { id: "004", name: "温兆伦", sex: "男", age: 52 },
                 ],
+                nameFilter: "",
             },
             methods: {
                 filteName: function () {
                     console.log("过滤名字");
                 },
             },
+            computed: {
+                filteredPersonList() {
+                    return this.personsList.filter((p) => {
+                        return p.name.indexOf(this.nameFilter) != -1;
+                    });
+                },
+            },
         });
     </script>
 </html>