1、
<div id="app">
<table border="1">
<tr>
<th>排名</th>
<th>姓名</th>
<th>总分</th>
</tr>
<tr v-for="(obj,i) in scores" v-if="num" >
<div >
<td>{{ i+1 }}</td>
<td>{{ obj.name }}</td>
<td>{{ count1(obj) }}</td>
</div>
</tr>
</table>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
h: '200px',
w: '200px',
bgc: 'linear-gradient(to top, red 50%, green 50%)',
rad: '50%',
num: false,
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: {
count1(obj) {
return obj.math + obj.chinese + obj.english
},
sort1(arr) {
console.log("调用了");
for (let i=0; i < arr.length - 1; i++) {
for (let j=0; j < arr.length - 1 - i; j++) {
if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
app.num = true
}
},
filters: {},
watch: {
}
});
app.sort1(app.scores);
</script>
2、
<div id="app">
<table border="1">
<tr>
<th>排名</th>
<th>姓名</th>
<th>总分</th>
</tr>
<tr v-for="(obj,i) in scores" v-if="num" >
<td>{{ i+1 }}</td>
<td>{{ obj.name }}</td>
<td>{{ count1(obj) }}</td>
</tr>
</table>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
num: false,
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: {
count1(obj) {
return obj.math + obj.chinese + obj.english
},
sort1(abb) {
let arr = [];
for (let q=0;q<abb.length; q++){
console.log('调用了');
if (abb[q].math>60 && abb[q].chinese>60 && abb[q].english>60){
arr.splice(q,1,abb[q])
}
}
for (let i=0; i < arr.length - 1; i++) {
for (let j=0; j < arr.length - 1 - i; j++) {
if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
this.scores = arr;
app.num = true
}
},
filters: {},
watch: {
}
});
app.sort1(app.scores);
</script>
3、
<div id="app">
<table border="1">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(obj,i) in FScores" v-if="num" >
<td>{{ i+1 }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.math }}</td>
<td>{{ obj.chinese }}</td>
<td>{{ obj.english }}</td>
<td>{{ count1(obj) }}</td>
</tr>
</table>
<div>
<form action="">
最小值<input type="number" min="0" max="100" v-model="min">
~
最大值 <input type="number" min="0" max="100" v-model="max">
<input type="button" value="数学" @click="fClick('math')">
<input type="button" value="语文" @click="fClick('chinese')">
<input type="button" value="英语" @click="fClick('english')">
<input type="button" value="及格" @click="f60">
<input type="button" value="全部" @click="full">
</form>
</div>
</div>
<script>
let cl = function(obj){
return JSON.parse(JSON.stringify(obj))
};
let app = new Vue({
el: '#app',
data: {
num: false,
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},
],
FScores:null,
min:null,
max:null
},
methods: {
count1(obj) {
return obj.math + obj.chinese + obj.english
},
f60(){
let aff=[];
let abb = cl(this.scores);
for (let q=0;q<abb.length; q++){
if (abb[q].math>60 && abb[q].chinese>60 && abb[q].english>60){
aff.splice(q,1,abb[q])
}
}
this.FScores = aff
},
sort1() {
let arr = cl(this.scores);
for (let i=0; i < arr.length - 1; i++) {
for (let j=0; j < arr.length - 1 - i; j++) {
if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
this.scores = cl(arr);
this.FScores = cl(this.scores);
app.num = true
},
fClick(f){
if (this.max==null || this.min==null){
return alert('请输入条件')
}
let avv = [];
let acc = cl(this.scores);
for (let i=0;i<this.scores.length;i++){
if (acc[i][f]<=this.max && acc[i][f]>=this.min){
avv.splice(i,1,acc[i])
}
}
this.FScores = cl(avv);
},
full(){
this.FScores = cl(this.scores)
}
},
filters: {},
watch: {
}
});
app.sort1();
</script>