用table标签渲染下面的数据, 最后一列为总分, 第一列为排名
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},
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<table border="1px" style="margin: auto">
<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, i) in scores">
<td>{{ i+1 }}</td>
<td v-for="v in d">{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<script src="vue/vue.js"></script>
<script>
let 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},
];
// 计算出总分并添加到对象中
for (score of scores) {
score.total = score.math + score.chinese + score.english
}
// 按照总分排序
for (let i = 0; i < scores.length - 1; i++) {
for (let j = 0; j < scores.length - 1 - i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp;
}
}
}
new Vue({
el: '#d1',
data: {
scores
},
});
</script>
</body>
</html>