首页 > 其他分享 >vue2 input防抖功能

vue2 input防抖功能

时间:2023-04-27 15:02:42浏览次数:36  
标签:防抖 methods timer vue2 input null

1. 在el-input绑定@input事件

 2. 在data中定义timer为null

 3.在methods中定义@input绑定的方法

 4. 在setTimeout中调用对应处理的方法




<el-input style="width: 140px;color:#FF8900" size="small" v-model="singleDiscountForm.discount" @input="inputDiscount()">
            </el-input>


data(){
    return{
       tiemr:null,      
    }
},

methods:{
     inputDiscount() {
        if(this.timer){
          clearTimeout(this.timer)
        }
        this.timer=setTimeout(()=>{
          this.calculateDiscount();
        },600)
    },    
}

 

标签:防抖,methods,timer,vue2,input,null
From: https://www.cnblogs.com/chccee/p/17358910.html

相关文章

  • TextInput。它的常用方法及其参数说明
    get():获取输入框的文本内容。返回值为字符串类型。my_text_input=TextInput()text=my_text_input.get()print(text)set(text):设置输入框的文本内容。text参数为要设置的文本内容my_text_input=TextInput()my_text_input.set('Hello,Kivy!')focus():将输入框设为焦......
  • 安装多个NodeJS windows上安装多个Nodejs版本 解决vue2/vue3同时运行
    第一步下载nvm-windowsnvm-windows下载地址:Github最新下载地址进入之后直接下载第二步安装NVM注意路径一定不要包含空格中文否则会报错注意安装路径一定不要包含空格中文否则会报错 点击安装之后如果之前安装了nodejs的话会提示希望nvm管理已安装node版本吗点击是......
  • vue2与vue3的区别
    一.vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用ES5的一个APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3中使用了es6的ProxyAPI对数据代理。相比于vue2.x,使用proxy的优势如下defineProperty只能监听某个属性,不......
  • js节流和防抖
    节流(throttle):指连续触发事件的函数,在一定时间间隔内只执行一次。functionthrottle(fn,delay){lettimer=null;returnfunction(){constself=this;constargs=arguments;if(!timer){timer=setTimeout(function(){timer......
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想
    在Vue2项目中,可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中,具体取决于项目的需求和规模。1.Vuex状态管理在Vuex中定义一个user模块,用于存储用户信息,可以在登录成功后将用户信息存储到该模块中。```javascript//store/user.jsconststate={userInfo:null}......
  • Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法
    【问题描述】在需求开发的过程中遇到了一个奇怪的问题:点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。 【产生原因】查阅资料后得知,当el-form表单里只有一个 el-input时,按下回车建会自动触发页面提交功能,因此导致了页......
  • Vue2项目实战尚品汇 项目的路由分析
    视频5)路由的配置vue-router路由分为KVnode平台(并非语言)对于后台而言:K即为URL地址V即为相应的中间件http://localhost:8080/0607app.get("/0607",(res,req)=>{res.send('我是祖国的老花骨朵');});前端路由:K即为URL(网络资源定位符)V即为相应的路由组件5.1路由的一......
  • vue2源码-十四、computed和watch的区别
    computed和watch的区别computed和watch的相同点。底层都会创建一个watcher(用法的区别:computed定义的属性可以在模板中使用,watch不能在视图中使用)computed默认不会执行只有取值的时候才会执行内部会维护一个dirty属性,来控制依赖的值是否发生变化。默认计算属性需要同......
  • Vue2和ElementUI编写的无限级菜单路由
    Vue2和ElementUI编写的无限级菜单路由文章转载自:www.javaman.cn<template><div><el-menu:default-active="$route.path"class="el-menu-vertical-demo":collapse="isCollapse"router><templatev-for="item......
  • filebeat Configure 篇章—Input—Manage multiline messages
    Input——Managemultilinemessages ThefilesharvestedbyFilebeatmaycontainmessagesthatspanmultiplelinesoftext.Forexample,multilinemessagesarecommoninfilesthatcontainJavastacktraces.Inordertocorrectlyhandlethesemultilineeven......