2、先有一下成绩单数据
scores = [
{ 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 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</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>
</head>
<body>
<div id="app">
<table class="">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
{{ scores | sort }}
<tr v-for="l in scores.length" >
<td>{{ l }}</td>
<td v-for="(k, v, i) in scores[l - 1]">{{ k }}</td>
<td :class="c3">{{ score_sum(l) }}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
let scores_1 = {};
new Vue({
el: '#app',
data: {
scores: [
{ 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 },
],
c3: 0
},
methods: {
score_sum(l) {
// console.log(this.scores);
return +this.scores[l-1].math + +this.scores[l-1].chinese + +this.scores[l-1].english
},
},
filter: {
sort(scores) {
this.scores[l-1]['sum'] = +this.scores[l-1].math + +this.scores[l-1].chinese + +this.scores[l-1].english;
for (let i=0; i<this.scores.length-1; i++) {
for (let j=0; j<this.scores.length-1-i; j++) {
// 处理条件即可
if (this.scores['sum'][j].grade > this.scores['sum'][j + 1].grade) {
let temp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = temp;
}
}
}
scores_1 = this.scores;
console.log(this.scores_1);
return scores_1
}
},
})
</script>
</body>
</html>
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
B作业（选做）
"""
1、还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
"""