vue-列表过滤和排序

最新推荐文章于 2025-05-20 10:28:51 发布

原创最新推荐文章于 2025-05-20 10:28:51 发布 · 735 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IT学习

前端同时被 2 个专栏收录

41 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

这篇博客探讨了在Vue应用中如何实现列表的过滤和排序。首先介绍了利用计算属性`computed`进行列表过滤的方法，并给出了有无输入值时的不同效果。接着，详细讲解了如何根据对象的`age`属性进行升序和降序排序，通过点击按钮来切换不同的排序状态。

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

1. 列表过滤

运用了Vue实例化的 computed （计算属性）

例子：

	<div id="test">
	        <input type="text" v-model='searchName'>
	        <ul>
	            <li v-for= "(p,index) in filterP":key="index">
	                {{index}}--{{p.name}}--{{p.age}}
	            </li>
	        </ul>
	        <button>年龄升序</button>
	        <button>年龄降序</button>
	        <button>原本顺序</button>
	    </div>
	    
	    <script src="./vue.js"></script>
	    <script>
	        new Vue({
	            el : '#test',
	            data :{
	                searchName:"",
	                persons:[
	                        {name : 'tom',age:18},
	                        {name : 'tzh',age:19},
	                        {name : 'txm',age:20}
	                    ]
	            },
	            computed: { //计算属性
	                filterP(){
	                    const {persons,searchName} = this // 结构赋值
	                    // 判断列表是否包含输入框的值
	                    return persons.filter(p=>p.name.indexOf(searchName)!=-1)
	                }
	            },
	        })

没有输入值前：
在这里插入图片描述
输入值后：

在这里插入图片描述

2. 列表排序

例子：

	<div id="test">
        <input type="text" v-model='searchName'>
        <ul>
            <li v-for= "(p,index) in filterP":key="index">
                {{index}}--{{p.name}}--{{p.age}}
            </li>
        </ul>
        <button @click='change(1)'>年龄升序</button>
        <button @click='change(2)'>年龄降序</button>
        <button @click='change(0)'>原本顺序</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el : '#test',
            data :{
                searchName:"",
                orderType : 0,//初始化判断条件
                persons:[
                        {name : 'tom',age:20},
                        {name : 'tzh',age:19},
                        {name : 'txm',age:25},
                        {name : 'tzo',age:100},
                    ]
            },
            computed: {
                filterP(){
                    const {persons,searchName,orderType} = this
                    let newPersons;
                    newPersons = persons.filter(p=>p.name.indexOf(searchName)!=-1)
                        if(orderType != 0){
                            newPersons.sort((a,b)=>{
                                if(orderType == 1){
                                    return a.age - b.age
                                }else{
                                    return b.age - a.age
                                }
                            })
                        }
                        return newPersons
                }
            },
            methods: {
                change(msg){
                    this.orderType = msg
                }
            },
        })
    </script>