第一题
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="margin:auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(stu,i) in scores">
<td>{{ i+1}}</td>
<td v-for="v in stu">{{ v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/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},
];
let total_scores = [];
for (stu of scores){
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for (let i=0;i<total_scores.length-1;i++){
for (let j=0;j<total_scores.length-1-i;j++){
if (total_scores[j].total<total_scores[j+1].total){
let t=total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1]=t;
}
}
}
console.log(total_scores);
new Vue({
el:'#app',
data:{
scores:total_scores,
}
});
</script>
</html>
第二题
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="margin:auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--添加筛选条件-->
<tr v-for="(stu,i) in scores" v-if="stu.math>60&&stu.chinese>60&&stu.english>60">
<td>{{ i+1}}</td>
<td v-for="v in stu">{{ v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/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},
];
let total_scores = [];
for (stu of scores){
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for (let i=0;i<total_scores.length-1;i++){
for (let j=0;j<total_scores.length-1-i;j++){
if (total_scores[j].total<total_scores[j+1].total){
let t=total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1]=t;
}
}
}
console.log(total_scores);
new Vue({
el:'#app',
data:{
scores:total_scores,
}
});
</script>
</html>