美文网首页
VUE列表的搜索和排序

VUE列表的搜索和排序

作者: 陈老板_ | 来源:发表于2018-06-25 14:50 被阅读27次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="demo">
            <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>
    </body>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                searchName:'',
                orderType:0,//0代表原本顺序,1代表升序,2代表降序
                persons:[
                    {name:'Tom',age: 18},
                    {name:'coc',age: 16},
                    {name:'jjj',age: 17},
                    {name:'xxx',age: 19},
                ]
            },
            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 fPersons;
                }
            },
            methods:{
                setOrderType(orderType){
                    this.orderType = orderType;
                }
            }
        })
    </script>
    </html>
    

    相关文章

      网友评论

          本文标题:VUE列表的搜索和排序

          本文链接:https://www.haomeiwen.com/subject/balyyftx.html