<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.active {
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<table class="table-striped table table-hover table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(e,i) in result">
<th>{{ i+1 }}</th>
<th v-for="(v,k,j) in e">{{ v }}</th>
</tr>
</tbody>
</table>
<hr>
<table class="table-striped table table-hover table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(e,i) in result" v-if="e.math>=60 && e.chinese>=60 && e.english>=60">
<th>{{ i+1 }}</th>
<th v-for="(v,k,j) in e">{{ v }}</th>
</tr>
</tbody>
</table>
<hr>
<table class="table-striped table table-hover table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(e,i) in result" v-if="(e.math<=v2 && e.math>=v1 && page ==='math')|| (e.chinese<=v2 && e.chinese>=v1 && page ==='chinese')||(e.english<=v2 && e.english>=v1 && page ==='english')">
<th>{{ i+1 }}</th>
<th v-for="(v,k,j) in e">{{ v }}</th>
</tr>
</tbody>
</table>
<button @click="f('math')" :class="{active : page==='math'}">math</button>
<button @click="f('chinese')" :class="{active : page==='chinese'}">chinese</button>
<button @click="f('english')" :class="{active : page==='english'}">english</button>
<input type="number" v-model="v1">~~~<input type="number" v-model="v2">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1:'',
v2:'',
page: 'r_page',
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},
]
},
methods: {
f(argv) {
this.page=argv;
}
},
computed: {
result() {
if (this.page === 'r_page') {
for (let i = 0; i < this.scores.length - 1; i++) {
for (let j = 0; j < this.scores.length - 1 - i; j++) {
if ((this.scores[j].math + this.scores[j].chinese + this.scores[j].english) < (this.scores[j + 1].math + this.scores[j + 1].chinese + this.scores[j + 1].english)) {
let tmp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = tmp
}
}
}
for (let i = 0; i < this.scores.length; i++) {
this.scores[i]['总分'] = this.scores[i].math + this.scores[i].chinese + this.scores[i].english
}
}else{
let m=this.page;
console.log(m);
if (m=='math'){
for (let i = 0; i < this.scores.length - 1; i++) {
for (let j = 0; j < this.scores.length - 1 - i; j++) {
if (this.scores[j].math < this.scores[j + 1].math ) {
console.log(this.scores[j].m);
let tmp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = tmp
}
}
}
}else if(m=='chinese'){
for (let i = 0; i < this.scores.length - 1; i++) {
for (let j = 0; j < this.scores.length - 1 - i; j++) {
if (this.scores[j].chinese < this.scores[j + 1].chinese ) {
console.log(this.scores[j].m);
let tmp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = tmp
}
}
}
}else if(m=='english'){
for (let i = 0; i < this.scores.length - 1; i++) {
for (let j = 0; j < this.scores.length - 1 - i; j++) {
if (this.scores[j].english < this.scores[j + 1].english ) {
console.log(this.scores[j].m);
let tmp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = tmp
}
}
}
}
for (let i = 0; i < this.scores.length; i++) {
this.scores[i]['总分'] = this.scores[i].math + this.scores[i].chinese + this.scores[i].english
}
}
return this.scores
}
}
})
</script>
</html>