在Vue開發中,我們經常需要處理JSON數據。當JSON數據需要根據一定規則進行排序時,Vue提供了很多方法幫助我們方便地實現這個功能。
下面是一個示例JSON數據:
const data = [ {id: 2, name: 'Tom', age: 25}, {id: 4, name: 'Jack', age: 24}, {id: 1, name: 'Alice', age: 26}, {id: 3, name: 'Bob', age: 23} ];
以年齡為排序規則,從小到大排序,可以使用sort方法:
const newData = data.sort((a, b) =>a.age - b.age); console.log(newData);
結果如下:
[ {id: 3, name: 'Bob', age: 23}, {id: 4, name: 'Jack', age: 24}, {id: 2, name: 'Tom', age: 25}, {id: 1, name: 'Alice', age: 26} ]
如果我們需要根據多個規則進行排序,則可以使用lodash庫的orderBy方法:
import _ from 'lodash'; const newData = _.orderBy(data, ['age', 'name'], ['asc', 'desc']); console.log(newData);
結果如下:
[ {id: 3, name: 'Bob', age: 23}, {id: 4, name: 'Jack', age: 24}, {id: 2, name: 'Tom', age: 25}, {id: 1, name: 'Alice', age: 26} ]
orderBy方法可以接受三個參數,第一個參數是需要排序的數組,第二個參數是排序規則,可以是單個規則或多個規則組成的數組,第三個參數是排序方式,可以是升序或降序。
總結:Vue中排序JSON數據可以使用sort、lodash等方法,使得排序規則更加靈活方便。
上一篇vue 數據顯示