Vue之列表过滤

玛卡巴咖

已于 2022-08-11 22:53:46 修改

阅读量151

点赞数

分类专栏： Vue 文章标签： javascript 前端 servlet

于 2022-08-10 10:20:05 首次发布

本文链接：https://blog.csdn.net/qq_67801847/article/details/126260100

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.模糊查询

1.通过v-model进行双向匹配，获取输入的数据

2.匹配

<script>
//    用watch实现

    // new Vue({
    //     el:'#root',
    //     data: {
    //         keyword:'',
    //         persons: [
    //             {id: '001', name: '马冬梅', age: 35},
    //             {id: '002', name: '周杰伦', age: 40},
    //             {id: '003', name: '杨kw', age: 20},
    //             {id: '003', name: '小鸟酱', age: 18}
    //         ],
    //         filpersons:[],
    //     },
    //     watch:{
    //         keyword:{
    //
    //             handler(val)
    //             {
    //                 this.filpersons = this.persons.filter((p) => {
    //                     return p.name.indexOf(val) !== -1
    //                 })
    //             }
    //         }
    //     }
    //
    // })

new Vue({
    el:'#root',
    data: {
        keyword:'',
        persons: [
            {id: '001', name: '马冬梅', age: 35},
            {id: '002', name: '周杰伦', age: 40},
            {id: '003', name: '杨kw', age: 20},
            {id: '003', name: '小鸟酱', age: 18}
        ],
    },
    computed:{
        filpersons(){
            return this.persons.filter((p) => {
                return p.name.indexOf(this.keyword) !== -1
            })

        }
    }

})



</script>

2.列表排序

    <div id="root">
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <button @click="sorttype=2">升序</button>
        <button @click="sorttype=1">降序</button>
        <button @click="sorttype=0">原</button>
        <ul>
<!--            key:相当于身份证-->
            <li v-for="(person,index) in filpersons" :key="index">
                {{person.name}}-{{person.age}}
            </li>
        </ul>
    </div>

<script>
    new Vue({
        el:'#root',
        data: {
            keyword:'',
            sorttype:0,//0原顺序，2升序，1降序
            persons: [
                {id: '001', name: '马冬梅', age: 35},
                {id: '002', name: '周杰伦', age: 40},
                {id: '003', name: '杨kw', age: 20},
                {id: '003', name: '小鸟酱', age: 18}
            ],
        },
        computed:{
            filpersons(){
                const arr=this.persons.filter((p) => {
                    return p.name.indexOf(this.keyword) !== -1
                })
                if(this.sorttype){
                    arr.sort((p1,p2)=>{
                        return this.sorttype ===1 ? p2.age-p1.age :p1.age-p2.age
                    })
                }
                return arr
            },

        }

    })
</script>