Vue列表排序

开始前先回顾一下sort排序用法：

定义一串数组arr，使用sort排序，会收到前后两个数据项设置两个参数a，b。

注意：a-b 是升序

b-a 是降序

a-b升序：

<script>let arr = [12,11,2,5,76,33]arr.sort((a,b)=>{return a-b})console.log(arr)
</script>

b-a降序：

<script>let arr = [12,11,2,5,76,33]arr.sort((a,b)=>{return b-a})console.log(arr)
</script>

Vue列表排序代码实现：

<body>
<div id="root"><!--遍历数组--><h2>人员列表</h2><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,index) in filPersons":key="p.id">{{p.name}}--{{p.age}}--{{p.sex}}</li></ul>
</div>
<script>new Vue({el:'#root',data:{keyWord:'',sortType:0,persons:[{id:'001',name:'马冬梅',age:'28',sex:'女'},{id:'002',name:'周冬雨',age:'12',sex:'女'},{id:'003',name:'周杰伦',age:'42',sex:'男'},{id:'004',name:'温兆伦',age:'49',sex:'男'},],},computed:{//列表过滤filPersons(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWord)!==-1})//利用sortType0，1，2的变换，判断是否排序if (this.sortType){arr.sort((p1,p2)=>{return this.sortType === 1 ? p2.age-p1.age :p1.age-p2.age})}return arr}}})
</script>
</body>

效果：