vue之debounce属性被移除及处理详解


Posted in Javascript onNovember 13, 2019

vue 2.0 debounce已经被移除

参考文档:

https://cn.vuejs.org/v2/guide/migration.html#替换-debounce-过滤器

https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-循环重复</title>
  <script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
  <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
<div id="box">
  <input type="button" @click="add" value="添加">
  <ul>
    <li v-for="val in arr">
      [[val]]
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
    delimiters: ['[[', ']]'],
    el: '#box',
    data: {
      arr: ['apple', 'pear', 'grape']
    },
    methods: {
      add: _.debounce(function () {
        this.arr.push('tomato')
      }, 1000)
    }

  })
</script>
</body>
</html>

在使用官方的'_.debounce()时要导入:

<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

以上这篇vue之debounce属性被移除及处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
You might like
php读取html并截取字符串的简单代码
2009/11/30 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php实现将Session写入数据库
2015/07/26 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
thinkphp分页实现效果
2016/10/13 PHP
js计算精度问题小结
2013/04/22 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python实现合并字典的方法
2015/07/07 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python字符串,数值计算
2016/10/05 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python logging模块handlers用法详解
2020/08/14 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
思想品德课教学反思
2014/02/10 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
店面出租协议书范本
2014/11/28 职场文书
道歉情书大全
2015/05/12 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书