vue模糊查询列表排序

最新推荐文章于 2024-07-12 16:27:40 发布

秒¤说

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量140

点赞数

分类专栏： vue 文章标签： javascript html 前端 vue.js

本文链接：https://blog.csdn.net/qq_51198547/article/details/130101427

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用计算属性，通过filter和indexO方法和sort方法实现一个模糊查询和列表排序的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="root">
        名: <input type="text" v-model="lastName">
        模糊搜索:<input type="text" placeholder="请输入查询内容" v-model="keyWord">
        <button @click="sortType=1">升序</button>
        <button @click="sortType=2">降序</button>
        <button @click="sortType=0">原序</button>
        <ul>
            <li v-for="(p,index) in filPersons" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
              
    </div>
    <script>

        const vm=new Vue({
            el:"#root",
            data:{
                lastName:'dd',
                keyWord:'',
                // 0表示顺序 1降序 2升序
                sortType:0,
                persons:[
                    {id:001,name:"张三",age:21},
                    {id:002,name:"李四",age:23},
                    {id:003,name:"王五",age:2},
                    {id:004,name:"老六",age:33},
                ],
           
            
            },
            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===2?p2.age-p1.age:p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>
</html>