Vue_1-6_列表的搜索+排序

最新推荐文章于 2023-07-13 12:35:13 发布

陪你去流浪_

最新推荐文章于 2023-07-13 12:35:13 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118421038

版权

这个示例展示了如何在Vue.js应用中实现对列表的搜索过滤和动态排序功能。用户可以通过输入框输入名字来筛选人员，点击按钮可以切换年龄的升序或降序排列。代码中使用了Vue的计算属性`filterPersons`来处理数据过滤和排序，同时提供了`setOrderType`方法来改变排序类型。

摘要由CSDN通过智能技术生成

列表的搜索+排序

<!-- 
        列表过滤+列表排序
     -->
    <div id="app">
        <input type="text" v-model="searchName">
        <ul>
            <li v-for="(i,index) in filterPersons" :key="index">
                {{index}}---{{i.name}}---{{i.age}}
            </li>
        </ul>
        <button @click="orderType=1">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                searchName:'',
                persons:[
                    {name:'tom',age:18},
                    {name:'jack',age:26},
                    {name:'ben',age:20},
                    {name:'malk',age:27},
                ],
                orderType:0,//0原来顺序，1升序，2降序
            },
            computed: {
                filterPersons(){
                    //取出相关的数据
                    const {searchName, persons,orderType} = this;
                    //最终需要显示的数组
                    let fPersons;
                    //对persons进行过滤
                    fPersons = persons.filter(b => b.name.indexOf(searchName)!==-1);
                    //找到返回下标，找不到返回-1,对象b可自行定义
                    if(orderType!==0){
                        fPersons.sort(function(p1,p2){
                            //1升序，2降序
                            if(orderType==1){//升序
                                return p1.age-p2.age;                                
                            }
                            else{//降序
                                return p2.age-p1.age;
                            }
                        })
                    }
                    return fPersons;
                }
            },
            methods:{
                setOrderType(type){
                    this.orderType=type
                }
            }
        })
    </script>