<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="all" style="margin: auto" >
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for=" (i,o) in result">
<td >{{o+1}}</td>
<td>{{i.name}}</td>
<td>{{i.math}}</td>
<td>{{i.chinese}}</td>
<td>{{i.english}}</td>
<td>{{i.core}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
computed:{
result(){
let v1 = [{ 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 },
];
let total=[];
for (i of v1) {
i.core = i.math + i.chinese + i.english;
total.push(i);
}
for (let i=0; i<total.length-1;i++){
for (let j = 0;j<v1.length-1-i; j++){
if(total[j].core<total[j+1].core){
let temp = total[j];
total[j]=v1[j+1];
total[j+1] = temp;
return total
}
}
}
},
}
});
</script>
</html>
