<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id='app01' >
<table class="table table-hover table-striped">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody >
<tr v-for="(pepole, i) in scores">
<td>{{i+1}}</td>
<td>{{pepole.name}}</td>
<td>{{pepole.math}}</td>
<td>{{pepole.chinese}}</td>
<td>{{pepole.english}}</td>
<td>{{pepole.sum}}</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div id="app02">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody >
<tr v-for="(pepole, i) in filteredScores">
<td>{{i + 1}}</td>
<td>{{pepole.name}}</td>
<td>{{pepole.math}}</td>
<td>{{pepole.chinese}}</td>
<td>{{pepole.english}}</td>
<td>{{pepole.sum}}</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div id='app03' >
<table class="table table-hover table-striped">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody >
<tr v-for="(pepole, i) in scores">
<td>{{i+1}}</td>
<td>{{pepole.name}}</td>
<td>{{pepole.math}}</td>
<td>{{pepole.chinese}}</td>
<td>{{pepole.english}}</td>
<td>{{pepole.sum}}</td>
</tr>
</tbody>
</table>
<button v-on:click='filter("chinese")'>语文</button>
<button v-on:click='filter("english")'>英语</button>
<button v-on:click='filter("math")'>数学</button>
<button v-on:click='filter("all")'>所有</button>
<input type="number" name="lower" v-model='lower'> ~ <input v-model='upper' type="number" name="upper">
</div>
</body>
<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 },
];
for (i in scores) {
scores[i]['sum'] = scores[i].math + scores[i].chinese + scores[i].english;
};
// console.log(scores.length)
for (let i=0; i < scores.length; i++) {
for (let j=0; j < scores.length - 1 - i; j++) {
if (scores[j].sum < scores[j + 1].sum) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp;
};
};
};
new Vue({
el: '#app01',
data: {
scores: scores,
},
});
// app02
var filteredScores = [];
for (i in scores) {
// 用is_show标记是否有科目小于60分
is_show = 1;
s = ['math', 'english', 'chinese'];
s.forEach(function (val, index){
if (scores[i][val] < 60) {
is_show = 0;
};
});
if (is_show) {
filteredScores.push(scores[i]);
};
};
new Vue({
el: '#app02',
data: {
filteredScores: filteredScores,
},
})
// app03
app03Scores = JSON.parse(JSON.stringify(scores));
new Vue({
el: '#app03',
data: {
scores: app03Scores,
upper: 100,
lower: 0,
},
methods: {
filter (course) {
if (course=='all') {
this.scores = app03Scores;
return;
};
var lower = this.lower;
var upper = this.upper;
var temp = [];
scores.forEach(function (val, index){
if (val[course] > lower & val[course] < upper) {
temp.push(scores[index]);
};
});
this.scores = temp;
},
}
})
</script>
</html>