vue学习（19）列表过滤、排序

<div id="root">
        <input type="text" v-model="keyWords" placeholder="请输入姓名">
        <button @click="sortTyp = 1">年龄升序</button>
        <button @click="sortTyp = 2">年龄降序</button>
        <button @click="sortTyp = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
    </div>

 new Vue({
            el: '#root',
            data: {
                keyWords: '',
                sortTyp: 0,
                persons: [
                    { id: '001', name: '马冬梅', age: 18 },
                    { id: '002', name: '周冬雨', age: 19 },
                    { id: '003', name: '周杰伦', age: 20 },
                    { id: '004', name: '温兆伦', age: 21 }
                ]
            },
            computed: {
                filterPersons() {
                    const arr = this.persons.filter(item => {
                        return item.name.indexOf(this.keyWords) !== -1;
                    });
                    if (this.sortTyp) {
                        arr.sort((a, b) => {
                            return this.sortTyp === 1 ? a.age - b.age : b.age - a.age;
                        })

                    };
                    return arr;
                }
            }
        })

知识点

1：一个字符串中，使用indexOf筛选是否包含空字符时，返回0，而非-1。如'abc'.indexOf('') 返回0。
2：数组的filter方法不会改变原数组，需要拿一个变量接，数组的sort方法会改变原数组，前-后=》升序，后-前=》降序。
3：上述例子同样可以使用watch实现，因为能用computed实现的一定可以使用watch实现。