美文网首页
vue里使用lodash

vue里使用lodash

作者: w_小伍 | 来源:发表于2020-06-09 10:33 被阅读0次

lodash中文文档:https://www.lodashjs.com/docs/lodash.omit
这里可以搜索包:https://www.npmjs.com/
安装

npm install lodash-S

在src下新建plugins,新建lodash.js

import * as _ from 'lodash';
import Vue from 'vue';
Vue.prototype._ = _;

在main.js里引入

import './plugins/lodash';

使用

_.get(res, 'Msg')

单独使用
lodash.map

yarn add lodash.map -S

import _map from 'lodash.map'
data: 
arr: [
          { id: 0,name: 'qq',age: 20 },
          { id: 1,name: 'ww',age: 21 },
          { id: 2,name: 'dd',age: 19 },
          { id: 3,name: 'gg',age: 20 },
          { id: 4,name: 'aa',age: 20 },
        ],
methods:
// 遍历
        _map(this.arr, item => {
          console.log(item.id) // 0 1 2 3 4
        })

lodash.get -安装同上
当获取后端的数据的时候,对象层级深,可以用,可以指定默认值

import _get from 'lodash.get'
person: {
          tom: {
            name: 'tom'
          }
        }
const item = _get(this.person, 'tom.name', 'jeny')
// _get(获取的对象,获取的值,默认值)
console.log(item) // tom

lodash.tonumber

import _toNumber from 'lodash.tonumber'
const page = '12'
const numberPage = _toNumber(page)
 console.log(numberPage) // 12

lodash.split

import _split from 'lodash.split'
const str1 = 'a,b,c,d'
const strArr = _split(str1, ',',2)
// _split(str1, '分隔符', 限制结果的数量)
console.log(strArr) // ["a", "b"]

lodash.sortby
按某个字段排序

import _sortBy from 'lodash.sortby'
const obj1 = [
          { age: 19, fav: '篮球' },
          { age: 20, fav: '足球' },
          { age: 17, fav: '足球' },
        ]
const sortArr = _sortBy(obj1, item => item.age) // 升序
// const sortArr = _sortBy(obj1, item => -item.age) // 降序
console.log(sortArr)

lodash.uniqby
去重

const obj1 = [
          { age: 19, fav: '篮球' },
          { age: 20, fav: '足球' },
          { age: 17, fav: '足球' },
        ]
import _uniqBy from 'lodash.uniqby'
const uniqArr = _uniqBy(obj1, 'fav')
 // _uniqBy(obj1, '按哪个字段去重')
console.log(uniqArr)

lodash.filter-过滤

import _filter from 'lodash.filter'
const obj1 = [
          { age: 19, fav: '篮球' },
          { age: 20, fav: '足球' },
          { age: 17, fav: '足球' },
        ]
const filterArr = _filter(obj1, item => item.age > 19)
console.log(filterArr)

lodash.omitby

_.omit(object, [props])
这个对象由忽略属性之外的object自身和继承的可枚举属性组成。(注:可以理解为删除object对象的属性)

import _omitBy from 'lodash.omitby'
const obj2 = {
          name: 'xiao',
          age: undefined,
          fav: null,
          height: 180
        }
const omitObj = _omitBy(obj2, v => v) // 把有效值去掉了
const omitObj1 = _omitBy(obj2, v => !v) // 把有效值留下
 // _omitBy(目标对象, 要被忽略的属性)
console.log(omitObj)
console.log(omitObj1)
image.png

相关文章

网友评论

      本文标题:vue里使用lodash

      本文链接:https://www.haomeiwen.com/subject/jtqstktx.html