vue根據(jù)數(shù)組中某一項的值進行排序的方法

vue中數(shù)組和對象的排序

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設計制作、成都網(wǎng)站建設與策劃設計,平頂山網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設十載,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:平頂山等地區(qū)。平頂山做網(wǎng)站價格咨詢:13518219792

1數(shù)組排序

<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對象排序

<div id="app">
   <ul>
    <li v-for="(stu,index) in students1">{{stu}}</li>
   </ul>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",
    data:{
     students:[
      {name:"小a",age:20},
      {name:"小b",age:21},
      {name:"小c",age:18},
      {name:"小d",age:19},
      {name:"小f",age:18}
     ]
    },
    computed:{
     students1:function(){
      return sortKey(this.students,'age')
     }
    }
   })
   function sortKey(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>

一、前言

我在vue項目中遇到了一個表格排序的需求，根據(jù)某一項的值的大小從大到小調整數(shù)組順序。

二、代碼

vue 根據(jù)數(shù)組中某一項的值進行排序的方法

表格大概是這個樣子，樣式和圖片在代碼中簡化了。

<table class="recommend_table" cellspacing="0">
 <tr>
  <th>股票</th>
  <th @click="sort('in_price')">入選價</th>
  <th @click="sort('now_price')">最新價</th>
  <th @click="sort('increase')">模擬漲跌幅</th>
 </tr>
 <tr v-for="(item,index) in recommendlist" :key="index">
  <td>
   <div class="recommend_name">{{item.name}}</div>
   <div class="recommend_num">{{item.bn}}</div>
  </td>
  <td>{{item.in_price}}</td>
  <td>{{item.now_price}}</td>
  <td>{{item.increase}}%</td>
 </tr>
</table>

<script type="text/ecmascript-6">
 export default {
  data(){
   return{
    recommendlist: [
     { name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01 },
     { name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06 },
     { name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01 }
    ],
    sortType: 'in_price'
   }
  },
  methods: {
   sort(type) {
    this.sortType = type;
    this.recommendlist.sort(this.compare(type));
    // switch(type){
     // case 'in_price':
     //  this.sortType = 'in_price';
     //  this.recommendlist.sort(this.compare('in_price'));
     //  break;
     // case 'now_price':
     //  this.sortType = 'now_price';
     //  this.recommendlist.sort(this.compare('now_price'));
     //  break;
     // case 'increase':
     //  this.sortType = 'increase';
     //  this.recommendlist.sort(this.compare('increase'));
     //  break;
    // }
   },
   compare(attr) {
    return function(a,b){
     var val1 = a[attr];
     var val2 = b[attr];
     return val2 - val1;
    }
   }
  }
 }
</script>

1. 排序方法

這里用到的是數(shù)組的sort方法，這個方法有一個需要注意的地方，就是不傳參數(shù)的話，將按字母順序對數(shù)組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。這并不是我們想要的排序方法，所以必須要傳參。

sort方法的參數(shù)是一個函數(shù)，這個函數(shù)提供了一個比較方法，要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數(shù)字。

  1. 若 a 小于 b，在排序后的數(shù)組中 a 應該出現(xiàn)在 b 之前，則返回一個小于 0 的值。
  2. 若 a 等于 b，則返回 0。
  3. 若 a 大于 b，則返回一個大于 0 的值。
compare(key) {
 return function(a,b){
  var val1 = a[key];
  var val2 = b[key];
  return val2 - val1;
 }
}

在代碼中，compare函數(shù)中的匿名函數(shù)就是這樣一個函數(shù)，但這個函數(shù)外面又嵌套了一層，這是因為需要根據(jù)數(shù)組中的某一項來排序，所以需要把這一項的key值傳進來。

2. 調用排序方法

sort(type) {
 this.sortType = type;
 this.recommendlist.sort(this.compare(type));
 // switch(type){
  // case 'in_price':
  //  this.sortType = 'in_price';
  //  this.recommendlist.sort(this.compare('in_price'));
  //  break;
  // case 'now_price':
  //  this.sortType = 'now_price';
  //  this.recommendlist.sort(this.compare('now_price'));
  //  break;
  // case 'increase':
  //  this.sortType = 'increase';
  //  this.recommendlist.sort(this.compare('increase'));
  //  break;
 // }
}

一開始我按照注釋的部分寫的，和我一樣抽象能力不是特別好的人首先會想到要這樣寫，但是寫出來之后發(fā)現(xiàn)三種情況不過是重復的代碼，這時我就直接用最上面兩行代碼來代替，寫完以后感覺內心一片平和。這種復用率高的代碼簡直讓人太舒服了。

三、結語

雖然是一個簡單的功能，但是非常值得歸納總結一下。希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：vue根據(jù)數(shù)組中某一項的值進行排序的方法
新聞來源：http://www.muchs.cn/article44/gcejhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、響應式網(wǎng)站、、自適應網(wǎng)站、企業(yè)建站、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設