vue项目中lodash的使用

1,安装Lodash,通过npm安装,如下:

npm install --save lodash

2,引入loadsh,在组件的行为区域,在export default{}前导入lodash

import _ from 'lodash';

3.在页面中可以用 “_”来应用

lodashTest:function(){
  // 循环5次数
  _.times(5,function(i){
    console.log(i);
  });
  // 深度 copy 
  let objA = {name:'zzl'};
  let objB = _.cloneDeep(objA);
  console.log(objB);
  // 随机数
  console.log(_.random(5,80));
  // 对象扩展
  let objC = {"names": "colin", "car": "suzuki"};
  let objD = {"name": "james", "age": 17};
  let objE = _.assign(objC, objD);
  console.log(objE); // 合并到了一起
  // 筛选
  let objF = {"name": "colin", "car": "suzuki", "age": 17};
  console.log(_.omit(objF,['car','age'])); // 移除 car 和 age 保留 name
  console.log(_.omit(objF,'name')); // 移除 name 保留 c
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用lodash来实现节流和防抖的方法如下: 1. 安装lodash库:在项目根目录下打开命令行工具,执行以下命令安装lodash库: ``` npm install lodash ``` 2. 导入lodash库:在需要使用节流和防抖的组件,导入lodash库的相关函数: ```javascript import { debounce, throttle } from 'lodash'; ``` 3. 使用节流函数:使用`throttle`函数来实现节流。`throttle`函数会在指定的时间间隔内只执行一次函数,可以用于限制频繁触发的事件,例如滚动、拖拽等。以下是一个使用节流函数的示例: ```javascript export default { data() { return { scrollHandler: null }; }, methods: { handleScroll() { // 处理滚动事件的逻辑 console.log('Scroll event'); } }, mounted() { this.scrollHandler = throttle(this.handleScroll, 200); // 设置节流时间为200ms window.addEventListener('scroll', this.scrollHandler); }, beforeDestroy() { window.removeEventListener('scroll', this.scrollHandler); } } ``` 在上述代码使用`throttle`函数将`handleScroll`方法包装起来,设置节流时间为200ms。在组件的`mounted`生命周期钩子,将节流后的处理函数添加到`scroll`事件监听器,保证在指定时间间隔内只执行一次。 4. 使用防抖函数:使用`debounce`函数来实现防抖。`debounce`函数会在指定的时间间隔后执行函数,如果在这个时间间隔内又触发了同样的函数,则重新计时。以下是一个使用防抖函数的示例: ```javascript export default { data() { return { inputHandler: null, inputValue: '' }; }, methods: { handleInput() { // 处理输入事件的逻辑 console.log('Input event'); } }, mounted() { this.inputHandler = debounce(this.handleInput, 500); // 设置防抖时间为500ms } } ``` 在上述代码使用`debounce`函数将`handleInput`方法包装起来,设置防抖时间为500ms。在组件的`mounted`生命周期钩子,将防抖后的处理函数赋值给`inputHandler`。 在模板,将防抖处理函数绑定到相应的事件上: ```html <input type="text" v-model="inputValue" @input="inputHandler"> ``` 这样,在输入框输入内容时,只有在500ms内没有再次输入才会触发防抖后的处理函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值