"""
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
""""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-bordered table-striped" id="table">
<thead>
<tr>
<!-- <th>序号</th> -->
<th>排名</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for='(stu,i) in scores'>
<!-- 怎么取到值去相加求和 -->
<!-- <td>{{ i }}</td> -->
<td>{{ i+1 }}</td>
<td v-for='v in stu'>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</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.sum = 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].sum < total_scores[j+1].sum) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores)
new Vue({
el: '#table',
data: {
scores: total_scores,
}
})
</script>
</html>
"""
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-bordered table-striped" id="table">
<thead>
<tr>
<!-- <th>序号</th> -->
<th>排名</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>
</div>
</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.sum = 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].sum < total_scores[j+1].sum) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores)
new Vue({
el: '#table',
data: {
scores: total_scores,
}
});
</script>
</html>
