vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法
更新時(shí)間：2022年09月22日 11:06:57 作者：前端程序猿之路
這篇文章主要介紹了vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue給數(shù)組中對(duì)象排序 sort函數(shù)
開發(fā)穿梭框的時(shí)候，需要將左側(cè)選中的數(shù)據(jù)排序后添加到右側(cè)
先看代碼吧,后面解釋
originalData為左側(cè)選擇的數(shù)據(jù):
var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}];先給每個(gè)對(duì)象添加一個(gè)排序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}];寫一個(gè)排序函數(shù):
arraySort(property) {
return function (a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2
}
}
在進(jìn)行添加的時(shí)候排序：originalData.sort(arraySort('order'))
sort函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說明這兩個(gè)值的相對(duì)順序的數(shù)字。
比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前，則返回一個(gè)小于 0 的值。
- 若 a 等于 b，則返回 0。
- 若 a 大于 b，則返回一個(gè)大于 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'))
運(yùn)行結(jié)果如下：
vue小技巧：簡(jiǎn)單排序和對(duì)象排序
對(duì)于數(shù)組里面全是number
computed部分：
computed:{
? ? sortItems:function(){
? ? return this.items.sort(sortNumber);
? ? }
?}methods部分
function sortNumber(a,b){
? ? ? ? ? ? return a-b
? }
對(duì)于一個(gè)對(duì)象 有多種類型
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');
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新
Day.js庫本身專注于簡(jiǎn)化JavaScript日期和時(shí)間的操作,它的API設(shè)計(jì)直觀,且功能強(qiáng)大,可以方便地格式化日期、添加或減去時(shí)間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實(shí)現(xiàn)時(shí)間實(shí)時(shí)刷新,需要的朋友可以參考下2024-07-07
本文主要介紹了element表格去掉表頭的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue 導(dǎo)出文件,攜帶請(qǐng)求頭token操作
這篇文章主要介紹了vue 導(dǎo)出文件,攜帶請(qǐng)求頭token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于非Vuex實(shí)現(xiàn)的登錄狀態(tài)判斷封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器
這篇文章主要為大家詳細(xì)介紹了基于Vant UI框架實(shí)現(xiàn)時(shí)間段選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家介紹了vue使用反向代理解決跨域問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue使用Pinia輕松實(shí)現(xiàn)狀態(tài)管理
pinia，一個(gè)基于Vue3的狀態(tài)管理庫，它可以幫助開發(fā)人員管理Vue應(yīng)用程序的狀態(tài)，本文主要為大家介紹了Pinia的用法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
Vue?項(xiàng)目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項(xiàng)目中使用TSX（TypeScript?JSX）的背景、優(yōu)勢(shì)和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對(duì)于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇2024-11-11
Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例代碼
Avue是一個(gè)基于Vue.js的前端框架,它是由阿里云開發(fā)的一款企業(yè)級(jí)UI組件庫,旨在提供一套全面、易用且高性能的界面解決方案本文介紹了Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例,需要的朋友可以參考下2024-08-08