vue 根據數組中某一項的值進行排序的方法
更新時間：2018年08月30日 10:17:34 作者：Peggy7
這篇文章主要介紹了vue 根據數組中某一項的值進行排序的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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對象排序
<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項目中遇到了一個表格排序的需求，根據某一項的值的大小從大到小調整數組順序。
二、代碼
表格大概是這個樣子，樣式和圖片在代碼中簡化了。
<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. 排序方法
這里用到的是數組的sort方法，這個方法有一個需要注意的地方，就是不傳參數的話，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。這并不是我們想要的排序方法，所以必須要傳參。
sort方法的參數是一個函數，這個函數提供了一個比較方法，要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。
- 若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。
- 若 a 等于 b，則返回 0。
- 若 a 大于 b，則返回一個大于 0 的值。
compare(key) {
return function(a,b){
var val1 = a[key];
var val2 = b[key];
return val2 - val1;
}
}
在代碼中，compare函數中的匿名函數就是這樣一個函數，但這個函數外面又嵌套了一層，這是因為需要根據數組中的某一項來排序，所以需要把這一項的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ā)現三種情況不過是重復的代碼，這時我就直接用最上面兩行代碼來代替，寫完以后感覺內心一片平和。這種復用率高的代碼簡直讓人太舒服了。
三、結語
雖然是一個簡單的功能，但是非常值得歸納總結一下。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文主要介紹了vue?文件切片上傳的項目實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
下面小編就為大家分享一篇利用SpringMVC過濾器解決vue跨域請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue this.reload 方法 配置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關于vue3中輕松實現switch功能組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
詳解關于表格合并span-method方法的補充(表格數據由后臺動態(tài)返回)
這篇文章主要介紹了詳解關于表格合并span-method方法的補充(表格數據由后臺動態(tài)返回) ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue中使用iframe嵌入網頁,頁面可自適應問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關于Vue實現生成二維碼的簡單方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01