vue給數(shù)組中對象排序 sort函數(shù)的用法
更新時間：2022年09月22日 11:06:57 作者：前端程序猿之路
這篇文章主要介紹了vue給數(shù)組中對象排序 sort函數(shù)的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue給數(shù)組中對象排序 sort函數(shù)
開發(fā)穿梭框的時候，需要將左側(cè)選中的數(shù)據(jù)排序后添加到右側(cè)
先看代碼吧,后面解釋
originalData為左側(cè)選擇的數(shù)據(jù):
var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}];先給每個對象添加一個排序order:
for (let i = 0; i < originalData.length; i++) {
this.originalData[i]['order'] = i
}
添加后為：
var originalData =[{name: 'Tom',order: 1},{name: 'Andy',order: 2},{name: 'Marry',order: 3},{name: 'Tina',order: 4}];寫一個排序函數(shù):
arraySort(property) {
return function (a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2
}
}
在進行添加的時候排序：originalData.sort(arraySort('order'))
sort函數(shù)要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數(shù)字。
比較函數(shù)應該具有兩個參數(shù) a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的數(shù)組中 a 應該出現(xiàn)在 b 之前，則返回一個小于 0 的值。
- 若 a 等于 b，則返回 0。
- 若 a 大于 b，則返回一個大于 0 的值。
舉例：
var originalData =[{name: 'mingxin',order: 6},{name: 'wanglin',order: 1},{name: 'jiangxia',order:8},{name: 'liufang',order: 4},{name: 'wangha',order: 1},{name: 'liming',order: 7}];
function arraySort(property){
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
if(value1 - value2>0){
console.log(value1+"大于"+value2+"調(diào)換位置")
}else if(value1 - value2<0){
console.log(value1+"小于"+value2+"位置不變")
}else{
console.log(value1+"等于"+value2+"位置不變")
}
return value1 - value2
}
};
originalData.sort(arraySort('order'))
運行結(jié)果如下：
vue小技巧：簡單排序和對象排序
對于數(shù)組里面全是number
computed部分：
computed:{
? ? sortItems:function(){
? ? return this.items.sort(sortNumber);
? ? }
?}methods部分
function sortNumber(a,b){
? ? ? ? ? ? return a-b
? }
對于一個對象 有多種類型
data部分
students:[
? {name:'jspang',age:32},
? {name:'Panda',age:30},
? {name:'PanPaN',age:21},
? {name:'King',age:45}
]methods部分
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));
? ?});
}view部分
<ul>
? ?<li v-for="student in students">
? ? ? ?{{student.name}} - {{student.age}}
? ?</li>
</ul>computed部分
sortStudent:function(){
? ? ?return sortByKey(this.students,'age');
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中js判斷長時間不操作界面自動退出登錄,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue.js實現(xiàn)拖放效果的實例的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
本篇文章主要介紹了Vue的加載順序探討，詳細的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue項目打包后請求地址錯誤/打包后跨域操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue如何為GET或POST請求設置請求頭，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue無限滑動周選擇日期的組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
關于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue中前端與后端如何實現(xiàn)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09