vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法
vue給數(shù)組中對(duì)象排序 sort函數(shù)
開(kāi)發(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è)用于說(shuō)明這兩個(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中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)拖放效果的實(shí)例的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09解決VUE-Router 同一頁(yè)面第二次進(jìn)入不刷新的問(wèn)題
這篇文章主要介紹了解決VUE-Router 同一頁(yè)面第二次進(jìn)入不刷新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
這篇文章主要介紹了Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue無(wú)限滑動(dòng)周選擇日期的組件的示例代碼
這篇文章主要介紹了Vue無(wú)限滑動(dòng)周選擇日期的組件的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03