VUE中列表渲染-遍历排序，如年龄的升序降序，sort()方法

VUE中列表渲染-遍历排序

1.通过按钮的点击事件，修改传入的orderType的值，在0 1 2中变化

            <button @click="orderByAge(0)">默认</button>
            <button @click="orderByAge(2)">年龄向上升序</button>
            <button @click="orderByAge(1)">年龄向下升序</button>

2.钩子函数methods修改data中orderType值

        methods:{
            orderByAge(orderType){
                this.orderType = orderType;
            }
        }

3.在computed中计算升降序

if(orderType){
                    arr.sort((p1,p2)=>{
                        if(orderType === 1 ){
                            return p1.age - p2.age;
                        }else
                        {
                            return p2.age - p1.age;
                        }
                    })
                }

整体代码（sort（）的使用在后面）

<template>
    <div>
        <div>
            <h3>排序</h3>
            <button @click="orderByAge(0)">默认</button>
            <button @click="orderByAge(2)">年龄向上升序</button>
            <button @click="orderByAge(1)">年龄向下升序</button>
        </div>

        <p>-----------------------------------------------------------------------</p>
        <h3>搜索列表</h3>
        <input type="text" placeholder="请输入要搜索的姓名" v-model="searchName">
        <ul>
            <li v-for="(p,index) in filterPersons" :key="personsKeys[index]">
                {{index+1}} ) 姓名: {{p.name}}--年龄: {{p.age}}--性别: {{p.sex}}--
            </li>
        </ul>


    </div>
</template>

<script>
    import shortId from 'shortid'

    export default {
        name: "ListRenderTwo",
        data(){
            return{
                searchName:'',
                persons:[
                    {name:'张三',age:'18',sex:'男'},
                    {name:'李四',age:'28',sex:'女'},
                    {name:'王五',age:'38',sex:'男'},
                    {name:'赵六',age:'48',sex:'女'},
                    {name:'李七',age:'58',sex:'男'},
                    {name:'张三三',age:'18',sex:'男'},
                    {name:'李四四',age:'28',sex:'女'},
                    {name:'王五五',age:'38',sex:'男'},
                    {name:'赵六六',age:'48',sex:'女'},
                    {name:'李七七',age:'58',sex:'男'}
                    ],
                personsKeys:[],
                orderType:0
            }
        },
        mounted() {
            this.personsKeys = this.persons.map(v=>shortId.generate());
        },
        computed:{
            filterPersons(){
                //1 获取数据
                let {searchName,persons,orderType} = this;
                //2 取出数组中的数据
                let arr = [...persons];
                //3 过滤数据  trim()方法删除前后空格
                if(searchName.trim()){
                    //filter方法：过滤不满足括号后的条件，留下满足条件的
                    arr = persons.filter(p=>p.name.indexOf(searchName) !== -1)
                }

                //5.升序降序排列年龄
                if(orderType){
                    arr.sort((p1,p2)=>{
                        if(orderType === 1 ){
                            return p1.age - p2.age;
                        }else
                        {
                            return p2.age - p1.age;
                        }
                    })
                }
                //4 返回新的数组
                return arr;
            }
        },
        methods:{
            orderByAge(orderType){
                this.orderType = orderType;
            }
        }
    }
</script>

<style scoped>
ul{
    list-style: none;
}
    ul>li{
        padding: 4px 0;
    }

</style>

其中sort()方法的使用

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "
")
document.write(arr.sort(sortNumber))

</script>