changes
This commit is contained in:
3056762376@qq.com
parent
c2307aaeb8
commit
be25438052
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue