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