大众号小程序有什么用_vue之延时改写实例

摘要: 今日网编就为大伙儿共享一篇vue之廷时更新案例,具备非常好的参照使用价值,期待对大伙儿有一定的协助。一起追随网编回来看一下吧当我们们要做一个即时检索时,用watch监管数据...

今天小编就为大家分享一篇vue之延时刷新实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

当我们要做一个实时搜索时,用watch监控数据,当数据不断变化时,不可能立刻进行接口的请求,这样会给服务器带来麻烦,使服务器负载加重,此时就需要一个延时加载机制。

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title xichuan /title 
 link rel="stylesheet" href="element-ui/2.4.11/theme-chalk/index.css" rel="external nofollow" / 
 script src="npm/vue/dist/vue.js" /script 
 script src="element-ui/2.4.11/index.js" /script 
 /head 
 body 
 div id="test" 
 el-input id="inputSearch" placeholder="输入关键字搜索" suffix-icon="el-icon-search" size="mini" v-model="search" /el-input 
 {{show}}
 /div 
 /body 
 script 
new Vue({
 el: '#test',
 data: {
 search:'',
 show:'',
 timer: null,
 watch:{
 search:function(val, oldVal){
 //当不断输入字符时,因为延时执行还没有开始,就被清除,然后重新生成新的延时器
 //虽然不停的清除,生成新的延时器,但在输入的时候延时器内部的方法都一直没有被执行
 clearTimeout(this.timer); //清除延迟执行
 this.timer = setTimeout(()= { //设置延迟执行
 console.log('search:'+val+','+oldVal);
 this.show = this.search;
 },1000);
 /script 
 style 
 #inputSearch{
 width: 200px;
 left: 20px
 /style 
 /html 

以上这篇vue之延时刷新实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:电商网站