数组筛选与排序(对数组进行选择排序)

之前2节我们一起学习了和（2）Vue基础入门，第18节，数组筛选，使用属性监视对数组进行过滤对数组数据的筛选，今天我们借用属性计算的方法的代码，完成列排序的问题。

1、定义数组数据，字段包含id name age address

data: { sortAge: 0, searchWord: "", persons: [ {"id": "001", "name": "张三", "age": 19, "address": "北京"}, {"id": "002", "name": "李四", "age": 29, "address": "南京"}, {"id": "003", "name": "李世民", "age": 39, "address": "南京"}, {"id": "004", "name": "王五", "age": 16, "address": "深圳"}, {"id": "005", "name": "老王", "age": 26, "address": "深圳"}, {"id": "006", "name": "麻子", "age": 46, "address": "广州"}, {"id": "007", "name": "刘二", "age": 38, "address": "上海"}, {"id": "008", "name": "张三丰", "age": 32, "address": "上海"}, {"id": "009", "name": "张无忌", "age": 48, "address": "上海"} ], },

2、定义3个按钮，分别绑定点击事件，升序、降序、恢复功能

3、定义一个搜索框

4、定义一个展示列表，这里采用ul -> li形式进行循环输出


    
        {{person.id}} > {{person.name}} > {{person.age}} > {{person.address}}

5、定义计算属性，方法为persons_1，

this.persons.filter((p)：js的命令，过滤器的意思

p.name.indexOf(Value) != -1：判断name里面有没有value字符串，如果-1代表没有

if (this.sortAge)：判断this.sortAge是否为0或者false

如果不为0或false，那么就对数据进行排序result.sort((a, b)

this.sortAge === 1 ? b.age - a.age : a.age - b.age：如果为1，进行降序排序b.age - a.age，如果不是1，进行升序排序a.age - b.age

computed: { persons_1() { const result = this.persons.filter((p) => { return p.name.indexOf(this.searchWord) != -1 }) if (this.sortAge) { result.sort((a, b) => { return this.sortAge === 1 ? b.age - a.age : a.age - b.age }) } return result } },

6、执行展示