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