vue--列表的过滤和排序

最新推荐文章于 2025-03-12 10:45:30 发布

ace_TiAmo

最新推荐文章于 2025-03-12 10:45:30 发布

阅读量327

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/ace15824843202/article/details/99686153

版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的列表过滤和排序功能的示例。通过输入搜索文本，可以实时过滤列表项，并提供了按年龄升序和降序排序的功能。代码中详细展示了如何使用Vue的计算属性和方法来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤和排序</title>
</head>
<body>
<div id="test">
    <input type="text" v-model="searchName">
    <ul>
        <li v-for="(item,index) in filterPer" :key="index">
            {{index}}---{{item.name}}---{{item.age}}
        </li>
    </ul>
    <button @click="sortPer(0)">原本排序</button>
    <button @click="sortPer(1)">年龄升序</button>
    <button @click="sortPer(-1)">年龄降序</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            searchName:'',
            orderBy:0,
            person:[
                {name:'Json',age:'18'},
                {name:'Mike',age:'9'},
                {name:'Jane',age:'26'},
                {name:'Peter',age:'22'}
            ]
        },
        computed:{

            filterPer(){
                const {searchName,person,orderBy} = this;
                let  filterP = person.filter(
                    //es6语法，箭头函数
                    p => p.name.indexOf(searchName)>=0
                );
                //排序
                if(orderBy===1){
                    filterP.sort(function (a,b) {
                        return a.age-b.age
                    })
                }else if(orderBy===-1){
                    filterP.sort(function (a,b) {
                        return b.age-a.age
                    })
                }


                return filterP
            }
        },
        methods:{
            sortPer(num){
                this.orderBy=num;

            }
        }
    })

</script>

</body>
</html>