一
<div id="app">
<div v-show="false">{{ scores | f1 }}</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(info, index) in scores">
<td>{{ index+1 }}</td>
<td>{{ info.name }}</td>
<td>{{ info.math }}</td>
<td>{{ info.chinese }}</td>
<td>{{ info.english }}</td>
<td>{{ info.sum }}</td>
</tr>
</tbody>
</table>
<script>
new Vue({
el: '#app',
data: {
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},
]
},
filters: {
f1 (score) {
var name = 'name'
for (let i=0;i<score.length;i++) {
console.log(score[i].sum = score[i].math+score[i].chinese+score[i].english)
}
console.log(score)
for (let i = 0; i < score.length - 1; i++) { // 趟数
for (let j = 0; j < score.length - 1 - i; j++) { // 比较次数
// 处理条件即可
if (score[j].sum < score[j + 1].sum ){
let temp = score[j];
score[j] = score[j + 1];
score[j + 1] = temp;
}
}
}
this.scores = score
},
}
})
</script>
二
<div id="app">
<div v-show="false">{{ scores | f1 }}</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(info, index) in arr" >
<td>{{ index+1 }}</td>
<td>{{ info.name }}</td>
<td>{{ info.math }}</td>
<td>{{ info.chinese }}</td>
<td>{{ info.english }}</td>
<td>{{ info.sum }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
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},
]
},
filters: {
f1 (score) {
var arr = []
for (let i=0;i<score.length;i++) {
if (score[i].math>=60&&score[i].chinese&&score[i].english>=60) {
score[i].sum = score[i].math + score[i].chinese + score[i].english
arr.push(score[i])
}
}
console.log(arr)
for (let i = 0; i < arr.length - 1; i++) { // 趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 比较次数
// 处理条件即可
if (arr[j].sum < arr[j + 1].sum ){
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr)
this.arr = arr
},
}
})
</script>
三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="vue/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--<div v-show="false">{{ scores | f1 }}</div>-->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(info, index) in score">
<td>{{ index+1 }}</td>
<td>{{ info.name }}</td>
<td>{{ info.math }}</td>
<td>{{ info.chinese }}</td>
<td>{{ info.english }}</td>
<td>{{ info.sum }}</td>
</tr>
</tbody>
</table>
<button @click="changeSbj('math')">math</button>
<button @click="changeSbj('chinese')">chinese</button>
<button @click="changeSbj('english')">english</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
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},
],
page: 'other',
},
methods: {
changeSbj(change) {
this.page = change
}
},
computed: {
score() {
var pager = this.page;
if (pager == '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) {
let temp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = temp;
}
}
}
}else if(pager == '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) {
let temp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = temp;
}
}
}
}else{
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) {
let temp = this.scores[j];
this.scores[j] = this.scores[j + 1];
this.scores[j + 1] = temp;
}
}
}
}
return this.scores
}
}
})
</script>
</html>