<div id="app">
        <input type="text" v-model="searchName">

        <ul>
            <li v-for="(item, index) in filterPerson" :key="index">
                {{index}}--{{item.name}}---{{item.age}}</li>
        </ul>      

        <button @click = "setCheckStatus(1)">升序</button>
        <button @click = "setCheckStatus(2)">降序</button>
        <button @click = "setCheckStatus(0)">复原</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>       
        var vm = new Vue({
            el:"#app",
            data:{
                searchName:"",
                checkStatus:0,//0为初始状态吗 1为升序 2为降序
                persons:[
                    {name:"jack",age:18},
                    {name:"tom",age:17},
                    {name:"cat",age:16},
                    {name:"rose",age:19}
                ]
            },
            computed: {
                filterPerson(){
                    //取出相关数据
                    const {searchName,persons,checkStatus} = this
                    //定义最终现实的数组
                    let fPersons
                    //对persons进行过滤
                    // fPersons = persons.filter(function (item) {
                    //   return  item.name.indexOf(searchName) >=0
                    //  })
                    fPersons = persons.filter(item=>item.name.indexOf(searchName)!==-1)
                    //排序
                     if(checkStatus !==0){//判断状态码
                        fPersons.sort(function (item1,item2) {
                             //1为升序 2为降序
                             if(checkStatus==1){
                                return item1.age-item2.age
                             }else{
                                return item2.age-item1.age
                             }
                          })
                     }   
                    return fPersons
                }             
            },
            methods: {
                setCheckStatus(checkStatus){
                    //重置状态码
                    this.checkStatus = checkStatus
                }
            },
        })

    </script>

ffilter方法

---

定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
array.filter(function(currentValue,index,arr), thisValue)

Image.png

• 返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

fPersons = persons.filter(function (item) {
       return  item.name.indexOf(searchName) >=0
  })

---

sort方法

定义和用法

sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
注意：当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
注意： 这种方法会改变原始数组！。

Image [2].png

sort() 方法，有一个可选参数，必须是函数，供它调用。那么就是个回调函数咯！
回调函数的参数要有两个：第一个参数的元素肯定在第二个参数的元素前面!!!
这个方法的排序是看回调函数的返回值：
如果返回值大于 0，则位置互换。
如果返回值小于 0，则位置不变。

var arr = [9,7,2];
arr.sort(function(a,b){
    if(a>b) // 如果 a 大于 b,位置互换
        return 1;
    else //否则，位置不变
        return -1;});