保存进度！

列表过滤/列表过滤.html

@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2022-05-24 21:47:36
  * @LastEditors: Kane
- * @LastEditTime: 2022-05-24 22:12:10
+ * @LastEditTime: 2022-05-25 11:01:43
- * @FilePath: \vue学习\列表过滤\列表过滤.html
+ * @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>