From be254380528255652dcf68ae3b4408be68eef089 Mon Sep 17 00:00:00 2001
From: "3056762376@qq.com" <3056762376@qq.com>
Date: Sat, 19 Nov 2022 16:17:15 +0800
Subject: [PATCH] changes

---
 .../网站内容搜索/index/index.html       | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 08-综合练习/网站内容搜索/index/index.html
diff --git a/08-综合练习/网站内容搜索/index/index.html b/08-综合练习/网站内容搜索/index/index.html
new file mode 100644
index 0000000..6062986
--- /dev/null
+++ b/08-综合练习/网站内容搜索/index/index.html
@@ -0,0 +1,117 @@
+<!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>Document</title>
+  <link rel="stylesheet" href="../../../00-tools/Fontawesome/css/font-awesome.min.css">
+  <style>
+    *{
+      margin: 0;
+      padding: 0;
+    }
+    #app{
+      display: flex;
+    }
+    .search{
+      margin: 50px 10px;
+      border: 1px solid gray;
+      width: 50%;
+      border-radius: 20px 20px 0 0;
+      display: flex;
+      height: 50px;
+    }
+    input{
+      outline: none;
+      border: none;
+      flex: 1;
+      height: 50px;
+      margin: 0 20px;
+      font-size: 18px;
+    }
+    .size{
+      font-size: 30px;
+      line-height: 50px;
+      margin: 0 2%;
+    }
+    ul{
+      text-align: center;
+      list-style: none;
+    }
+    li{
+      margin: 24px 0;
+    }
+    .list{
+      border: 1px dashed gray;
+    }
+    .search,.list{
+      flex: 1;
+    }
+    li{
+      display: flex;
+    }
+    li>div{
+      flex: 1;
+      text-align: center;
+      border-right: 1px dashed gray;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="search">
+      <input type="text" name="" id="" v-model="keyword">
+      <i class="fa fa-search size"></i>
+    </div>
+    <div class="list">
+      <ul>
+        <div>
+          <h1>课程表</h1>
+        </div>
+        <li>
+          <div>课程</div>
+          <div>时间</div>
+        </li>
+        <li v-for="week in item">
+          <div>{{week.name}}</div>
+          <div>{{week.week}}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</body>
+<script src="../../../00-tools/JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    data:{
+      list:[
+        { id: 1 , name: "Vue框架开发",week:"周一上午第三到四节"},
+        { id: 2, name: "大数据原理", week: "周二上午第一至四节" },
+        { id: 3, name: "大数据挖掘", week: "周二下午第一至四节" },
+        {id: 4, name: "数据库管理", week: "周三上午第三至四节" },
+        { id: 5, name: "大数据认证", week: "周四上午第三至四节" },
+        { id: 6, name: "网络爬虫", week: "周五下午第一至四节" },
+        { id: 7, name: "数据结构与算法", week: "周一上午第三到四节" },
+        { id: 8, name: "移动应用开发", week: "周一下午第三至四节" },
+        { id: 9, name: "WEB应用开发", week: "周二上午第一至二节" },
+        { id: 10, name: "大学体育-羽毛球", week: "周四下午第三至四节" },
+        { id: 11, name: "云计算技术概论", week: "周五上午第一至二节" },
+        { id: 12, name: "面向对象程序设计", week: "周五上午第三至四节" },
+      ],
+      keyword:"",
+      searchIn:[]
+    },
+    computed:{
+      item(){
+        let find_element= this.list.filter((lists)=>{
+          return lists.name.indexOf(this.keyword)!==-1 || lists.week.indexOf(this.keyword)!==-1
+        })
+        this.searchIn.push(find_element)
+        return find_element
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
