<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.light {
background-color: red;
}
</style>
</head>
<body>
<section>
<div>
<p>## A作业（必做）</p>
<p>1、按照上方 知识点总结 模块，总结今天所学知识点；</p>
<p>2、先有一下成绩单数据</p>
<p>scores = [</p>
<p>{ name: 'Bob', math: 97, chinese: 89, english: 67 },</p>
<p>{ name: 'Tom', math: 67, chinese: 52, english: 98 },</p>
<p>{ name: 'Jerry', math: 72, chinese: 87, english: 89 },</p>
<p>{ name: 'Ben', math: 92, chinese: 87, english: 59 },</p>
<p>{ name: 'Chan', math: 47, chinese: 85, english: 92 },</p>
<p>]</p>
<p>用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；</p>
<p>3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。</p>
<p>## B作业（选做）</p>
<p>1、还是采用上方相同的数据，添加筛选规则：</p>
<p>i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科</p>
<p>ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果</p>
<p>举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据</p>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>排名</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,i) in scores">
<td>{{ p.name }}</td>
<td>{{ i+1 }}</td>
<td>{{ p.math+p.chinese+p.english }}</td>
</tr>
</tbody>
</table>
<br>
<br>
<table class="table table-hover">
<thead>
<tr>
<th>及格的学生姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="p in scores">
<td>{{ p | f1 }}</td>
</tr>
</tbody>
</table>
<br>
<br>
<input type="text" v-model="min" placeholder="输入最小分数">-
<input type="text" v-model="max" placeholder="输入最大分数">
{{ min }}-{{ max }}
<br>
<br>
<button type="button" @click="changeColor1" :class="btClass1">语文</button>
<button type="button" @click="changeColor2" :class="btClass2">数学</button>
<button type="button" @click="changeColor3" :class="btClass3">英语</button>
<table class="table table-hover">
<thead>
<tr>
<th>学生姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="p in scores">
<td>{{ p | f2 }}</td>
</tr>
</tbody>
</table>
<br>
<br>
</section>
</body>
<script>
let arr = [
{name: 'Bob', math: 97, chinese: 89, english: 67},
{name: 'Tom', math: 67, chinese: 52, english: 98},
{name: 'Jerry', math: 72, chinese: 87, english: 89},
{name: 'Ben', math: 92, chinese: 87, english: 59},
{name: 'Chan', math: 47, chinese: 85, english: 92},
];
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j].math + arr[j].chinese + arr[j].english < arr[j + 1].math + arr[j + 1].chinese + arr[j + 1].english) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
new Vue({
el: 'section',
data: {
scores: arr,
min: '',
max: '',
course: '',
btClass1: '',
btClass2: '',
btClass3: '',
t: ''
},
methods: {
changeColor1() {
this.btClass1 = 'light';
this.btClass2 = '';
this.btClass3 = '';
this.course = 'chinese'
},
changeColor2() {
this.btClass1 = '';
this.btClass2 = 'light';
this.btClass3 = '';
this.course = 'math'
},
changeColor3() {
this.btClass1 = '';
this.btClass2 = '';
this.btClass3 = 'light';
this.course = 'english'
},
},
filters: {
f1(p) {
if (p.math > 60 && p.chinese > 60 && p.english > 60) {
return p.name
}
},
f2(p) {
if (this.course == 'chinese') {
if (p.chinese > this.min && p.chinese < this.max) {
return p.name
}
} else if (this.course == 'math') {
if (p.math > this.min && p.math < this.max) {
return p.name
}
} else if (this.course == 'english') {
if (p.english > this.min && p.english < this.max) {
return p.name
}
}
},
},
watch: {
max(n) {
this.t = ''
}
}
});
</script>
</html>
