• 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>
  • 相关阅读:
    openGL
    shader
    安卓2
    安卓
    错误整理
    3D图形学
    shaderlab
    MVC
    一、TCP扫描技术
    端口扫描技术
  • 原文地址:https://www.cnblogs.com/it-taosir/p/9944395.html
Copyright © 2020-2023  润新知