1、先有一下成绩单数据
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="app">
<table border="1" >
<tr>
<th>id</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>total</th>
</tr>
<tr v-for="(score,i) in result">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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 },
]
},
computed: {
result() {
// 按照总分数进行排名
for (let i = 0; i < this.scores.length - 1; i++) {
for (let j = 0; j < this.scores.length - 1 - i; j++) {
// 处理条件即可
if (this.scores[j].math + this.scores[j].chinese + this.scores[j].english < this.scores[j + 1].math + this.scores[j + 1].chinese + this.scores[j + 1].english) {
let temp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = temp;
}
}
}
for (let i = 0; i < this.scores.length ; i++) {
this.scores[i]['total']=this.scores[i].math + this.scores[i].chinese + this.scores[i].english}
return this.scores;
console.log(this.scores);
},
}
});
</script>
</html>