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</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(st,i) in scores">
<td>{{ i+1 }}</td>
<td v-for="v in st">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="vue/vue.min.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},
];
let total_score = [];
scores.forEach((st)=>{
st.total = st.math + st.chinese + st.english;
total_score.push(st);
});
for (let i = 0; i < total_score.length - 1; i++) {
for (let j = 0; j < total_score.length - 1 - i; j++) {
if (total_score[j].total > total_score[j + 1].total) {
temp = total_score[j];
total_score[j] = total_score[j + 1];
total_score[j + 1] = temp;
}
}
}
</script>
<script>
new Vue({
el: '#app',
data: {
scores: total_score
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(st,i) in scores" v-if="st.math > 60 & st.chinese > 60 & st.english > 60">
<td>{{ i+1 }}</td>
<td v-for="v in st">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="vue/vue.min.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},
];
let total_score = [];
scores.forEach((st) => {
st.total = st.math + st.chinese + st.english;
total_score.push(st);
});
for (let i = 0; i < total_score.length - 1; i++) {
for (let j = 0; j < total_score.length - 1 - i; j++) {
if (total_score[j].total > total_score[j + 1].total) {
temp = total_score[j];
total_score[j] = total_score[j + 1];
total_score[j + 1] = temp;
}
}
}
</script>
<script>
new Vue({
el: '#app',
data: {
scores: total_score
}
})
</script>
</html>
