'''
有以下成绩单数据
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="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<table>
<div>
<thead>
<tr>
<th>No.</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>sumScore</th>
</tr>
</thead>
<tbody>
<tr v-for="d in score">
<td></td>
<td>{{ d.name }}</td>
<td>{{ d.math }}</td>
<td>{{ d.chinese }}</td>
<td>{{ d.english }}</td>
<td>{{ d.ttlScore }}</td>
</tr>
</tbody>
</div>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#d1',
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:'Chan',math:'47',chinese:'85',english:'92'}
]
},
filter: {
sumScore(s1,s2,s3) {
return s1 + s2 + s3
}
},
computed: {
score() {
let scoreArr = this.scores;
for (let i = 0; i < scoreArr.length - 1; i++) {
for (let j = 0; j < scoreArr - 1 - i; j++) {
let currentScore = scoreArr[j].math + scoreArr[j].chinese + scoreArr[j].english;
let nextScore = scoreArr[j + 1].math + scoreArr[j + 1].chinese + scoreArr[j + 1].english;
scoreArr[j].ttlScore = currentScore;
scoreArr[j + 1].ttlScore = nextScore;
if (currentScore < nextScore) {
let temp = scoreArr[j];
scoreArr[j] = scoreArr[j + 1];
scoreArr[j + 1] = temp;
}
}
}
console.log(scoreArr);
return scoreArr
}
}
});
</script>
</html>