VUE：列表的过滤与排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06_列表渲染_过滤与排序</title>
    </head>
    <body>
        <!--
            1.列表过滤
            2.列表排序
        -->
        
        <div id="test">
            <input type="text" v-model="searchName"/>
            <ul>
                <li v-for="(p,index) in filterPersons" :key="index">
                    {{index}}--{{p.name}}--{{p.age}}
                </li>                    
            </ul>
            
            <button @click="setOrderType(1)">年龄升序</button>
            <button @click="setOrderType(2)">年龄降序</button>
            <button @click="setOrderType(0)">原本顺序</button>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el: '#test',
                data:{
                    persons:[
                        {name:'Tom',age:18},
                        {name:'Jack',age:16},
                        {name:'Bob',age:19},
                        {name:'Rose',age:17}
                    ],
                    searchName:'',
                    orderType: 0,    //0代表原本，1代表升序，2代表降序
                },
                computed:{
                    filterPersons(){
                        //取出相关数据
                        const {searchName,persons,orderType}=this 
                        //最终需要显示的数组
                        let fPersons;
                        //对persons进行过滤
                        fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1)
                        
                        //排序
                        if(orderType!==0){
                            fPersons.sort(function(p1,p2){    //返回负数P1在前，返回正数P2在前
                                //1代表升序，2代表降序
                                if(orderType===2){
                                    return p2.age-p1.age
                                }else{
                                    return p1.age-p2.age
                                }
                                return p2.age-p1.age
                            })
                        }
                        
                        return fPersons
                    }
                },
                methods:{
                    setOrderType(orderType){
                        this.orderType=orderType
                    }
                }
            })
        </script>
    </body>
</html>
VUE：列表的过滤与排序

猜你喜欢
