提交小修改！

2022-05-24 22:40:45 +08:00 · 2022-05-24 22:40:45 +08:00 · 225189854c
parent 28b0a0ba00
commit 225189854c
2 changed files with 74 additions and 4 deletions
--- a/css/kane.css
+++ b/css/kane.css
@ -1,4 +1,3 @@
-
 html {
    --backupground-color: #f7f7f7;
    --btn-color-blue: #307dbe;
@ -9,7 +8,8 @@ html {
    background-color: #eee;
 }

-#root {
+#root,
+#app {
    height: 100vh;
    width: 100vw;
    position: fixed;
@ -18,7 +18,8 @@ html {
    overflow: auto;
 }

-#root *+* {
+#root,
+#app * + * {
    margin-top: 15px;
 }

@ -61,7 +62,7 @@ input {
 }

 label {
-    display:inline-block;
+    display: inline-block;
    font-size: 2rem;
    margin-top: 15px;
 }
--- a/列表过滤/列表过滤.html
+++ b/列表过滤/列表过滤.html
@ -0,0 +1,69 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-05-24 21:47:36
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-05-24 22:12:10
+ * @FilePath: \vue学习\列表过滤\列表过滤.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>列表过滤</title>
+        <link rel="stylesheet" href="../css/root.css" />
+        <link rel="stylesheet" href="../css/normalize.css" />
+        <link rel="stylesheet" href="../css/kane.css" />
+        <script src="../vue/vue.js"></script>
+    </head>
+    <body>
+        <div id="app">
+            <h1>学习列表过滤！</h1>
+            <hr />
+            <fieldset title="过滤">
+                <legend>&nbsp;过滤&nbsp;</legend>
+                <label for=""
+                    >姓名：<input type="text" v-on:keydown.enter="filteName();"
+                /></label>
+                <label
+                    >性别：
+                    <select name="" id="">
+                        <option value=""></option>
+                        <option value="男">男</option>
+                        <option value="女">女</option>
+                    </select>
+                </label>
+            </fieldset>
+            <ul>
+                <li v-for="person in personsList" v-bind:key="person.id">
+                    姓名：{{person.name}} - 性别：{{person.sex}} -
+                    年龄：{{person.age}}
+                </li>
+            </ul>
+        </div>
+    </body>
+    <script>
+        Vue.config.productionTip = false;
+
+        const vm = new Vue({
+            el: "#app",
+            data: {
+                personsList: [
+                    { id: "001", name: "马冬梅", sex: "女", age: 18 },
+                    { id: "002", name: "周冬雨", sex: "女", age: 19 },
+                    { id: "003", name: "周杰伦", sex: "男", age: 33 },
+                    { id: "004", name: "温兆伦", sex: "男", age: 52 },
+                ],
+            },
+            methods: {
+                filteName: function () {
+                    console.log("过滤名字");
+                },
+            },
+        });
+    </script>
+</html>