vue中數組和對象的排序


1數組排序

<div id="app">
     <ul>
          <li v-for="a in arr1">{{a}}</li>
     </ul>
 </div>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    arr:[1,4,5,2,3,44]
                },computed:{
                    arr1:function(){
                        return this.arr.sort(sortNum)//調用排序方法
                    }
                }
            })
            function sortNum(a,b){//排序方法
                return a-b;
            }
        </script>

2對象排序

 1       <div id="app">
 2             <ul>
 3                 <li v-for="(stu,index) in students1">{{stu}}</li>
 4             </ul>
 5         </div>
 6         <script type="text/javascript">
 7             new Vue({
 8                 el:"#app",
 9                 data:{
10                     students:[
11                         {name:"小a",age:20},
12                         {name:"小b",age:21},
13                         {name:"小c",age:18},
14                         {name:"小d",age:19},
15                         {name:"小f",age:18}
16                     ]
17                 },
18                 computed:{
19                     students1:function(){
20                         return sortKey(this.students,'age')
21                     }
22                 }
23             })
24             function sortKey(array,key){
25                 return array.sort(function(a,b){
26                     var x = a[key];
27                     var y = b[key];
28                     return ((x<y)?-1:(x>y)?1:0)
29                 })
30             }
31         </script>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM