<!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>
<script src="js/vue.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="button">
<table class="table table-hover">
<thead>
<tr>
<th>rand</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>grades</th>
</tr>
</thead>
<tbody>
<tr v-for="(info,n) in scores"
v-if="whoShow(info,min,max,selected)">
<th>{{ n+1 }}</th>
<th v-for="(v,k,i) in info">{{ v }}</th>
<th>{{ info | sum }}</th>
</tr>
</tbody>
</table>
<button type="button" :style="{backgroundColor:bgColor1}" @click="selectSub('chinese')">语文</button>
<button type="button" :style="{backgroundColor:bgColor2}" @click="selectSub('math')">数学</button>
<button type="button" :style="{backgroundColor:bgColor3}" @click="selectSub('english')">英语</button>
<button type="button" :style="{backgroundColor:bgColor4}" @click="selectSub('all')">所有</button>
筛选区间：<input type="text" v-model="min">-
<input type="text" v-model="max">
</div>
<script>
// 直接在外面操作好列表，贼low
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 (let i = 0; i < scores.length - 1; i++) {
for (let j = 0; j < scores.length - 1 - i; j++) {
let scoreJ = scores[j].chinese + scores[j].english + scores[j].math;
let scoreJ1 = scores[j + 1].chinese + scores[j + 1].english + scores[j + 1].math;
// scores[j]['grades'] = scoreJ;
// scores[j + 1]['grades'] = scoreJ1;
if (scoreJ < scoreJ1) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp;
}
}
}
new Vue({
el: '.button',
data: {
scores: scores,
bgColor1: "",
bgColor2: "",
bgColor3: "",
bgColor4: "",
selected: "all",
min: 0,
max: 100
},
methods: {
whoShow(info, min, max, selected) {
if (selected === 'all') {
let tag = 1;
Object.keys(info).forEach(function (key) {
if (key !== 'name') {
if (min > info[key] || info[key] > max) {
tag = 0
}
}
});
return tag
} else if (min <= info[selected] && info[selected] < max) {
return 1;
}
},
selectSub(sub) {
if (sub === 'chinese') {
this.bgColor1 = "red";
this.bgColor2 = this.bgColor3 = this.bgColor4 = "";
} else if (sub === 'math') {
this.bgColor2 = "red";
this.bgColor1 = this.bgColor3 = this.bgColor4 = "";
} else if (sub === 'english') {
this.bgColor3 = "red";
this.bgColor1 = this.bgColor2 = this.bgColor4 = "";
} else {
this.bgColor4 = "red";
this.bgColor1 = this.bgColor2 = this.bgColor3 = "";
}
this.selected = sub;
}
},
filters: {
sum(info) {
return info.chinese + info.math + info.english
},
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号