v

列表过滤和排序

https://cdn.bootcss.com/vue/2.6.10/vue.min.js">

{{index}}--{{p.name}}--{{p.age}}

年龄升序

年龄降序

原本顺序

    new Vue({

        el: '#demo', data: {

            orderType: 0, //0 代 表 不 排 序 , 1 为 升 序 , 2 为 降 序

            searchName: '',

            persons: [{id: 1, name: 'Tom', age: 13},

                {id: 2, name: 'Jack', age: 12},

                {id: 3, name: 'Bob', age: 17},

                {id: 4, name: 'Cat', age: 14},

                {id: 4, name: 'Mike', age: 14},

                {id: 4, name: 'Monica', age: 16}]

        }, methods: {

            setOrderType(orderType) {

                this.orderType = orderType

            }

        }, computed: {

            filterPerson() {

                let {orderType, searchName, persons} = this

                // 过 滤

                persons = persons.filter(p => p.name.indexOf(searchName) != -1)

                //排 序

                if (orderType !== 0) {

                    persons = persons.sort(function (p1, p2) {

                        if (orderType === 1) {

                            return p1.age - p2.age

                        } else {

                            return p2.age - p1.age

                        }

                    })

                }

                return persons

            }

        }

    })