vue--列表的过滤和排序

最新推荐文章于 2024-03-10 22:18:11 发布

ace_TiAmo

最新推荐文章于 2024-03-10 22:18:11 发布

阅读量281

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/ace15824843202/article/details/99686153

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>

过滤结果

升序

降序

ace_TiAmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue--列表的过滤和排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表过滤和排序</title></head><body><div id="test"> <input type="...
复制链接

扫一扫