5. 列表的过滤与排序

HTML

<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>

JS

new Vue({
    el: "#root",
    data: {
        keyWord: "",
        sortType: 0, //0为原顺序 1为降序 2为升序
        persons: [
            {id: "001", name: "马冬梅", age: 19, "sex": "女"},
            {id: "002", name: "周冬雨", age: 20, "sex": "女"},
            {id: "003", name: "周杰伦", age: 21, "sex": "男"},
            {id: "004", name: "温兆伦", age: 22, "sex": "男"}
        ],
    },
    //用computed实现
    computed: {
        filPersons() {
            const arr = this.persons.filter((p) => {
                //过滤条件
                return p.name.indexOf(this.keyWord) !== -1;
            })
            //判断试下是否排序 0为falst 1和2为true
            if (this.sortType) {
                arr.sort((p1, p2) => {
                    return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
                })
            }
            return arr;

        }
    }
})

过滤排序逻辑

当点击排序按钮时,Vue中的sortType进行改变,Vue中的监视属性检测到sortType进行改变了,所以执行filPersons方法,返回一个过滤并进行排序后的一个数组,当filPersons变化后,页面中使用到filPersons的地方进行重新渲染