列表搜索 - 列表排序 - 《十年运维》

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
    <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <div id="app">
            过滤:<input type="text" v-model="keyword" >
            <button @click="sortype=1">正向排序</button>
            <button @click="sortype=2">逆向排序</button>
            <ul>
                <li v-for="(p,index) in newP">
                    {{ p.name }} - {{ p.sex }} - {{ p.age }}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data : {
                    keyword: '',
                    //如果是0，默认不排序，1正序排列 2 逆序排列
                    sortype: 0,
                    persons: [
                        {id: '001',name:'马冬梅', age:39, sex: '女'},
                        {id: '002',name:'周冬雨', age:28, sex: '女'},
                        {id: '003',name:'周杰伦', age:54, sex: '男'},
                        {id: '004',name:'温兆伦', age:16, sex: '男'},
                    ],
                },
                computed : {
                    newP(){
                        const that = this
                        var y =  this.persons.filter(function (p){
                            return p.name.indexOf(that.keyword) !== -1;
                        })
                        if (this.sortype == 0) {
                            return y
                        } else if (this.sortype ==1 ){
                            //正序排列
                            var z = y.sort(function(a,b){return a.age-b.age})
                            return z
                        }else if (this.sortype == 2 ) {
                            //逆序排列
                            var z = y.sort(function(a,b){return b.age-a.age})
                            return z
                        }
                    }
                }
            })
        </script>
    </body>
</html>