2、先有一下成绩单数据
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""
2
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<table class="table" >
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>num</th>
</tr>
</thead>
<tbody>
<tr v-for="(s,id) in base">
<td>{{id+1}}</td>
<td v-for="(a,b) in s">{{a}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
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 (let i=0;i<scores.length-1;i++){
for (let j=0;j<scores.length-1-i;j++){
if((scores[j].math+scores[j].chinese+scores[j].english)<(scores[j+1].math+scores[j+1].chinese+scores[j+1].english)){
scores[j]['sum']=(scores[j].math+scores[j].chinese+scores[j].english);
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp;
}
scores[j]['sum']=(scores[j].math+scores[j].chinese+scores[j].english);
}
}
new Vue({
el:'#app',
data:{
base:scores
}
})
// console.log(scores)
</script>
</html>
3
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<table class="table" >
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>num</th>
</tr>
</thead>
<tbody>
<tr v-for="(s,id) in base" v-if="s.math>60 && s.chinese>60 && s.english>60">
<td>{{id+1}}</td>
<td v-for="(a,b) in s">{{a}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
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 (let i=0;i<scores.length-1;i++){
for (let j=0;j<scores.length-1-i;j++){
if((scores[j].math+scores[j].chinese+scores[j].english)<(scores[j+1].math+scores[j+1].chinese+scores[j+1].english)){
scores[j]['sum']=(scores[j].math+scores[j].chinese+scores[j].english);
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp;
}
scores[j]['sum']=(scores[j].math+scores[j].chinese+scores[j].english);
}
}
new Vue({
el:'#app',
data:{
base:scores
}
})
// console.log(scores)
</script>
</html>