Vue-v-for(数组,对象)排序(按序)

446 阅读1分钟
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in sortItems">{{item}}</li>
       </ul>
       <ul>
           <li v-for="student in sortStudent">
               {{student.name}} --- {{student.age}}
           </li>
       </ul>
    </div>

    <script>
        var app = new  Vue({
            el:'#app',
            data:{
                items:[20,23,18,65,32,1,54,5,41],
                students:[
                        {name:'jspang',age:32},
                        {name:'Panda',age:30},
                        {name:'PanPaN',age:21},
                        {name:'King',age:45}
                        ]
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sortNumber)
                },
                sortStudent:function(){
                    return sortByKey(this.students,'age')
                }
            }

        })
        //定义一个函数,sort函数解决这个Bug
        function sortNumber(a,b){
            return a-b
        }
        //数组对象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
        }

    </script>

</body>