Vue——列表排序

最新推荐文章于 2024-03-29 14:19:17 发布

王王仙贝~

最新推荐文章于 2024-03-29 14:19:17 发布

阅读量3.1k

点赞数

分类专栏：王王仙贝的Vue学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45741986/article/details/123761620

版权

王王仙贝的Vue学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

实现按字筛选名单，并按照年龄对其进行升序排列、降序排列或原顺序排列
在这里插入图片描述

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input v-model="keyWord" type="text" placeholder="请输入名字">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <!-- 遍历列表 -->
        <ul>
            <li v-for="p in filPersons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>

    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            keyWord: '',
            sortType: 0,//0原顺序,1降序,2升序
            persons: [
                { id: '001', name: '马冬梅', age: 18, sex: '女' },
                { id: '002', name: '周冬雨', age: 19, sex: '女' },
                { id: '003', name: '周杰伦', age: 20, sex: '男' },
                { id: '004', name: '任嘉伦', age: 21, sex: '男' }
            ]
        },
        computed: {
            filPersons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
                if (this.sortType) {
                    arr.sort((a, b) => {
                        return this.sortType === 1 ? b.age - a.age : a.age - b.age
                    })
                }
                return arr
            }
        }

    })
</script>

王王仙贝~

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Vue——列表排序

实现按字筛选名单，并按照年龄对其进行升序排列、降序排列或原顺序排列<body> <div id="root"> <h2>人员列表</h2> <input v-model="keyWord" type="text" placeholder="请输入名字"> <button @click="sortType=2">年龄升序</button> <b
复制链接

扫一扫