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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
Lodash

相關(guān)文章

Vue中在新窗口打開頁面及Vue-router的使用
這篇文章主要介紹了Vue中在新窗口打開頁面及 Vue-router的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-06-06
vue實現(xiàn)檢測敏感詞過濾組件的多種思路
這篇文章主要介紹了vue編寫檢測敏感詞匯組件的多種思路，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue中的插槽詳解
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-10-10
vue.js實現(xiàn)格式化時間并每秒更新顯示功能示例
這篇文章主要介紹了vue.js實現(xiàn)格式化時間并每秒更新顯示功能,結(jié)合實例形式分析了vue.js時間格式化顯示與基于定時器進行實時更新的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識庫
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識庫，感興趣的小伙伴們可以參考一下
2016-11-11
vue實現(xiàn)單點登錄的方式匯總
最近項目停工了，RageFrame的學習暫時告一段落，這一篇給大家分享下有關(guān)單點登錄的相關(guān)知識，并提供一些demo給大家參考，對vue單點登錄的實現(xiàn)方式感興趣的朋友一起看看吧
2021-11-11
Vue3進階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進階主題Composition API使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
vue實現(xiàn)列表展示示例詳解
這篇文章主要為大家介紹了vue實現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue結(jié)合echarts繪制一個支持切換的折線圖實例
這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10