细聊Vue列表中的那些事——数据排序

列表的数据排序是我们比较常用的功能之一，在此记录下vue中的排序写法，作为日常总结之需。

先上模板

<template>
<!--列表容器-->
<div class="sortList">
<!--列表的子项p，逐项循环出list的包含的数据-->
            <p class="sortList-item" v-for="(item,index) in list" :key="item.id">
                <span>{{item.age}}岁---{{item.name}}</span>
            </p>
            <button @click="listSort">{{btn_title}}</button>
        </div>
</template>

后上数据

     data(){
     return{
     btn_title: '从小到大排序',
     list: [{
                        id: 0,
                        name: '小明',
                        age: 18
                    },
                    {
                        id: 1,
                        name: '小王',
                        age: 15
                    },
                    {
                        id: 2,
                        name: '小苏',
                        age: 17
                    },
                    {
                        id: 3,
                        name: '小陈',
                        age: 21
                    }]
}
}

查看静态效果

效果.png

准备写方法啦~

methods: {
            //列表排序函数,调用相应排序方法
            listSort: function() {
                if (this.btn_title == "从小到大排序") {
                    this.list.sort(this.asc_oder)
                    this.btn_title = "从大到小排序"
                } else {
                    this.list.sort(this.desc_oder)
                    this.btn_title = "从小到大排序"
                }
            },

            /**
             * 年龄升序函数
             * @param {Object} a 第一个人的信息
             * @param {Object} b 第二个人的信息
             */
            asc_oder: function(a, b) {
             //这里注意传入的参数为对象，而我们要比较的是age
                return a.age - b.age
            },
            
            /**
             * 年龄降序函数
             * @param {Object} a 第一个人的信息
             * @param {Object} b 第二个人的信息
             */
            desc_oder: function(a, b) {
                return b.age - a.age
            }
}

查看最终效果

最终效果.png