溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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方法的參數是一個函數，這個函數提供了一個比較方法，要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。
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;
// }
}
一開始我按照注釋的部分寫的，和我一樣抽象能力不是特別好的人首先會想到要這樣寫，但是寫出來之后發現三種情況不過是重復的代碼，這時我就直接用最上面兩行代碼來代替，寫完以后感覺內心一片平和。這種復用率高的代碼簡直讓人太舒服了。
三、結語
雖然是一個簡單的功能，但是非常值得歸納總結一下。希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
