Vue案例-名字过滤以及年龄排序

代码

<div id="app">
    <input v-model="searchText">
    <table border="1px" cellpadding="0" cellspacing="0" width="100%">
        <tr align="">
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr v-for="user in filterUser">
        <!--  插值表达式  -->
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
    <button @click="orderByAge(1)">升序</button><br/>
    <button @click="orderByAge(2)">降序</button><br/>
    <button @click="orderByAge(3)">不排序</button><br/>
</div>

<script>
    new Vue({
        el: '#app',
        data(){
            return{
                users: [
                    {id: 1, name: 'zhangsan',age: 29},
                    {id: 2, name: 'lisi',age: 21},
                    {id: 3, name: 'wangwu',age: 18},
                    {id: 4, name: 'zhaoliu',age: 20},
                    {id: 5, name: 'tianqi',age: 25},
                    {id: 6, name: 'wangba',age: 11},
                ],
                searchText: '',
                order: 3
            }
        },
        computed: {
            filterUser: {
                get(){
                    let searchText = this.searchText
                    let order = this.order
                    let newUsers = this.users.filter(user => user.name.indexOf(searchText)>-1)
                    if(order!=3){
                       return newUsers.sort((user1,user2) => {
                            if(order==1){
                                return user1.age-user2.age
                            }else if(order==2){
                                return user2.age-user1.age
                            }
                        })
                    }
                    return newUsers

                }
            }
        },
        methods: {
            orderByAge(value){
                this.order=value
            }
        }
    })

</script>

• 使用lambda表达式，filter()函数返回原来的数据集

字符串调用indexOf(’’)返回0–>’'空字符串
indexOf(‘abc’)–>字符串中不存在’abc’时，返回-1

let newUsers = this.users.filter(user => user.name.indexOf(searchText)>-1)

• sort((user1,user2)=>return user1.age-user2.age),根据age的值进行升序排序

newUsers.sort((user1,user2) => {
                            if(order==1){
                                return user1.age-user2.age
                            }else if(order==2){
                                return user2.age-user1.age
                            }
                        })