Diagrama de clasificación
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
input {
height: 30px;
width: 200px;
}
</style>
<body>
<div id="box">
查询框：<input type="text" name="" v-model="keyWord">
<ul>
<li v-for="(p,index) in mPersons" :key="index">{
{p.id}} - {
{p.name}} - {
{p.age}}岁 - {
{p.sex}}</li>
</ul>
<button @click="sortUp">年龄升序</button>
<button @click="sortDown">年龄升序</button>
<button @click="sortOld">原顺序</button>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
persons: [
{ id: "001", name: "孙悟空", age: 21, sex: "男" },
{ id: "002", name: "唐三藏", age: 25, sex: "男" },
{ id: "003", name: "孙行者", age: 23, sex: "女" },
{ id: "004", name: "唐太宗", age: 33, sex: "男" },
{ id: "005", name: "张三丰", age: 22, sex: "女" },
],
keyWord: "",
mCheck: 1,
sortType: 0 // 0-序，1-升，2-降
},
methods: {
sortUp() {
this.sortType = 1;
},
sortDown() {
this.sortType = 2;
},
sortOld() {
this.sortType = 0;
},
},
computed: {
mPersons() {
// 先把筛选的数据存入变量数组sss
var sss = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1;
})
// 对SSS排序，再返回给mPersons
if (this.sortType == 0) {
return sss;
}
if (this.sortType == 1) {
return sss.sort((p1, p2) => {return p1.age - p2.age });
}
if (this.sortType == 2) {
return sss.sort((p1, p2) => { return p2.age - p1.age });
}
// return sss;
}
},
})
</script>
</html>