什么是列表排序?
列表排序是将列表(通常是一个数组)中的元素根据某种规则重新排列的过程。这个规则可以基于元素的属性值、对象的字段或者任何可比较的标准。列表排序在编程中非常普遍,它用于组织数据,使其按照特定的顺序展示,以便于用户浏览和理解。
列表排序 computed实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="icon" href="img/network.png" type="image/x-icon">
<script src="js/Vue.js"></script>
<!-- 引入Vue.js文件 -->
</head>
<body>
<div id="root">
<h1>人员列表</h1>
<input type="text" name="" id="" placeholder="请输入名字" v-model="keyWord">
<br>
<br>
<button @click="sortType = 2">升序</button>
<!-- 升序: 从低到高 -->
<button @click="sortType = 1">降序</button>
<!-- 降序:从高到低 -->
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(person,index) of filPerons" :key="index">
{{person.name}}-{{person.age}}-{{person.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//阻止Vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
keyWord: '',
sortType: 0,
// 0:原顺序
// 1:降序
// 2:升序
personnel: [
{ id: '001', name: '温兆伦', age: 18, sex: '男' },
{ id: '002', name: '马冬梅', age: 19, sex: '女' },
{ id: '003', name: '周杰伦', age: 20, sex: '男' },
{ id: '004', name: '周冬雨', age: 21, sex: '女' }
]
},
computed: {
filPerons() {
const arr = this.personnel.filter((person) => {
return person.name.indexOf(this.keyWord) !== -1
})
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
}
}
})
</script>
</body>
</html>