vue 对象数组排序 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div class="app">
      <h1>v-for实例</h1>
      <hr>
      <ol>
          <li v-for="number in sortNumbers">{{number}}</li>
      </ol>
      <hr>

      //按照年龄降序排序
      <ul>
        <li v-for="(student,index) in  sortstudents">{{index+1}}:{{student.name}}-{{student.age}}</li>
      </ul>
  </div>  
  <script>
  new Vue({
      el:'.app',
      data:{
          numbers:[5 ,88, 43, 56, 28, 61, 9],
          students:[
               {name:'廉租房',age:'38'} ,
               { name:'李的鑫',age:'29'},
               {name:'詹志强',age:'26'},
          ]
      },
      computed:{
        sortNumbers:function(){
              return this.numbers.sort( sortNumbers);
          },
          sortstudents:function(){
              return sortByKey(this.students,'age')
          }
      }
  });
function sortNumbers(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>
</html>

 

posted on 2021-10-15 00:09  码农at突泉  阅读(290)  评论(0)    收藏  举报