Vue中使用Lodash的實現(xiàn)示例
更新時間：2022年03月09日 08:32:08 作者：~疆
本文主要介紹了Vue中使用Lodash的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
安裝
cnpm i -S lodash
全局引入
import _ from 'lodash' Vue.prototype._ = _
使用
在任何地方使用_或者this._即可調(diào)用lodash
對象數(shù)組排序
let users = [
{ user: 'a', age: 48 },
{ user: 'b', age: 34 },
{ user: 'a', age: 42 },
{ user: 'b', age: 55 }
];
let c = this._.orderBy(users, ['age'], ['desc']);
console.log('age降序排列:', c);
let d = _.orderBy(users, ['user', 'age'], ['desc', 'asc']);
console.log('user降序,age升序排序:', d);場景1：
我們要可視化今天各個小時的數(shù)據(jù)，其中x軸為
['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15']，但是后端返回的json數(shù)據(jù)中缺失了某個時間段的數(shù)據(jù)，為了不讓echart中時間段錯位，我們需要補上這一條數(shù)據(jù)，其值設(shè)置為0
封裝函數(shù)：
test(
arr1 = ['00', '01', '02', '03'],
arr2 = [
{ value: '12', name: '00' },
{ value: '45', name: '01' },
{ value: '65', name: '03' }
],
orderKey = 'name',
order = 'asc'
) {
let arr_result = arr2.map((d) => d.name);
let a = arr1.filter((item) => !arr_result.includes(item));
if (a.length !== 0) {
a.forEach((item) => {
arr2.push({ value: '0', name: item });
});
}
return _.orderBy(arr2, [orderKey], [order]);
},到此這篇關(guān)于Vue中使用Lodash的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue使用Lodash 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要跟大家介紹了vue項目中全局引入1個.scss文件的問題解決，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
VUE跨域問題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個錯誤，VUE發(fā)送請求的時候不能請求到正確數(shù)據(jù)，VUE跨域問題Access to XMLHttpRequest at，本文就詳細的來介紹一下解決方法，感興趣的可以了解一下2022-05-05
這篇文章主要介紹了使用ElementUI修改el-tabs標簽頁組件樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue2.0實現(xiàn)移動端的輸入框?qū)崟r檢索更新列表功能
最近小編在做vue2.0的項目，遇到移動端實時檢索搜索更新列表的效果，下面腳本之家小編給大家?guī)砹藇ue2.0 移動端的輸入框?qū)崟r檢索更新列表功能的實例代碼，感興趣的朋友參考下吧2018-05-05
最近工作中遇到了一些問題,通過查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問題解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇Vue.js點擊切換按鈕改變內(nèi)容的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08