源码
源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>列表排序</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <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) of filPerons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                    <input type="text">
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false

            new Vue({
                el:'#root',
                data:{
                    keyWord:'',
                    sortType:0, //0原顺序 1降序 2升序
                    persons:[
                        {id:'001',name:'马冬梅',age:30,sex:'女'},
                        {id:'002',name:'周冬雨',age:31,sex:'女'},
                        {id:'003',name:'周杰伦',age:18,sex:'男'},
                        {id:'004',name:'温兆伦',age:19,sex:'男'}
                    ]
                },
                computed:{
                    filPerons(){
                        //先过滤:
                        const arr = this.persons.filter((p)=>{
                            return p.name.indexOf(this.keyWord) !== -1
                        })

                        //再排序:
                        //判断一下是否需要排序
                        if(this.sortType){
                            // .sort(前,后) 如果想升序,就写 前-后;  如果想降序,就写 后-前
                            arr.sort((p1,p2)=>{
                                //按 age 排序
                                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age

                            })
                        }
                        return arr
                    }
                }
            }) 

        </script>
</html>
032_列表排序

源码
