<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputVal" placeholder="请输入搜索内容"/>
            <ul>
                <li v-for="item in filterPerson" :key='item.id'>{{item.name}}-{{item.age}}</li>
            </ul>
            <button @click="sortType = 0 ">原顺序</button>
            <button @click="sortType = 1">年龄升序</button>
            <button @click="sortType = 2">年龄降序</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    inputVal:'',
                    sortType:0,//0代表原顺序，1代表升序，2代表降序
                    person:[
                        {name:'马冬梅',age:18,id:001},
                        {name:'周冬雨',age:13,id:002},
                        {name:'周杰伦',age:16,id:003},
                        {name:'温兆伦',age:15,id:004},
                    ]
                },
                computed:{
                    filterPerson(){
                        var arr = this.person.filter((e)=>{
                            return  e.name.indexOf(this.inputVal) !== -1 
                        })
                        if(this.sortType){
                            arr.sort((a,b)=>{
                            //升序    return a-b
                            //降序  return b-a
                            return this.sortType === 1 ? a.age - b.age : b.age - a.age
                            })
                        }
                        return arr
                    }
                }
            })
        </script>
    </body>
</html>