<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表排序</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息(遍历数组)：</h2>
<hr>
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<button @click="sortType=2">降序</button>
<button @click="sortType=1">升序</button>
<button @click="sortType=0">原顺序</button>
<!-- 遍历数组 -->
<ul>
<li v-for="p in filPersonList" :key="p.id">
{{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
keyWord: '',
sortType: 0,//0 原顺序、1--降序、2--升序
personList: [
{ id: '001', name: '乔峰', age: 28, sex: '男' },
{ id: '002', name: '虚竹', age: 25, sex: '男' },
{ id: '003', name: '段誉', age: 22, sex: '男' },
{ id: '004', name: '童姥', age: 90, sex: '女' },
{ id: '005', name: '李秋水', age: 88, sex: '女' },
],
},
computed: {
// 简写,简写时确保不用settter
// myfullname: function () {
filPersonList () {
const arr = this.personList.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
// 排序
if (this.sortType) {//0false，1,2true
arr.sort((p1, p2) => {
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
})
}
return arr
},
},
})
</script>
标签：Vue,21,age,sex,排序,id,name From： https://www.cnblogs.com/YYkun/p/18040877