Vue基础入门，第20节，数组筛选与排序

之前2节我们一起学习了 和 对数组数据的筛选，今天我们借用属性计算的方法的代码，完成列排序的问题。

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个按钮，分别绑定点击事件，升序、降序、恢复功能

 <button class="btn btn-block btn-primary" @click="sortAge = 2">升序</button>
<button class="btn btn-block btn-danger" @click="sortAge = 1">降序</button>
<button class="btn btn-block btn-success" @click="sortAge = 0">恢复</button>  

3、定义一个搜索框

 <input class="form-control" type="text" v-model:value="searchWord">  

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

 <ul>
    <li class="h3" v-for="person in persons_1" :key="person.id">
        {{person.id}} > {{person.name}} > {{person.age}} > {{person.address}}
    </li>
</ul>  

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、执行展示

7、代码截图