vue之延时刷新实例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xichuan</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="external nofollow" />
  <<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/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之延时刷新实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解VUE的状态控制与延时加载刷新

    在实际项目中,我们经常会遇到这种状况,某些数据我们希望等到需要的时候再去获取,或者某些数据我们需要刷新,但是不必立刻刷新,而是延时到展示的时候再去刷新. 在DOM操作的年代,想要实现这样的功能可能会稍微麻烦一些,然而当我们使用数据驱动的mv*框架的时候,这个想要实现这个需求就容易了许多. 当我们理解数据驱动时,我们很容易想到将需要刷新的状态也设置成为某个数据,在需要刷新的地方watch这个数据,当刷新状态发生变动的时候,watch生效并执行刷新的方法,这就实现了延时刷新.而且我们不再需要关注延时

  • 对vue事件的延迟执行实例讲解

    vue事件的延迟执行: <div id="box"> <input type="text" @keyup="show | debounce 2000"> </div> <script> var vm=new Vue({ data:{ }, methods:{ show:function(){ alert(1); } } }).$mount('#box'); </script> 以上这篇对

  • 关于vue.js中实现方法内某些代码延时执行

    今天在工作时遇见了某些代码需要延时操作的情况.具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后,grid内数据能够及时更新以便显示增删改操作后的数据.这里的话使用的是vue.js中的setTimeout函数来解决该问题. 代码如下: var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这

  • vue实现在一个方法执行完后执行另一个方法的示例

    用Promise来实现 function2(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } function3(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) } // 调用 function1(){ this.function2().then(val => { this.function3(); }); } 拓展知识:vue解决一个方法同时发送多个请求的问题 在项目开发过程中

  • 详解Vue.js在页面加载时执行某个方法

    jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 总结 以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • vue之延时刷新实例

    当我们要做一个实时搜索时,用watch监控数据,当数据不断变化时,不可能立刻进行接口的请求,这样会给服务器带来麻烦,使服务器负载加重,此时就需要一个延时加载机制. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xichuan</title> <link rel="stylesheet&q

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解

    vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置. 最近在项目中遇到这个问题,思考了几套方案,总是不太完善.百度搜到的方案也基本都只能满足一些很简单的需求.对于复杂一些的情况,还是有些不完善的地方.以下是个人对于这种场景的一个摸索,也参考了百度.如有更好的方案,欢迎指出. 缓存组件,vue2中提供了keep-alive.首

  • vue实现前进刷新后退不刷新效果

    最近在用vue尝试着做移动端的项目.希望实现前进刷新.后退不刷新的效果.即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载).例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新. 由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面.于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true) 来将界面销毁掉.但是在移动

  • 解决vue项目F5刷新mounted里的函数不执行问题

    项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

  • vue实现页面刷新动画

    vue实现页面刷新动画

    本文实例为大家分享了vue实现页面刷新动画的具体代码,供大家参考,具体内容如下 做一个vue的页面刷新动画,找了好多动画样式,感谢大佬们造的轮子. 主要就是在index.html文件里面写一个动画样式,在页面刷新的时候让他去前面做动画,等我们的样式可以加载的时候去把这个动画样式给移除掉就可以了,而判断我们的样式是否加载好可以用created生命周期去判断,因为这个生命周期是在浏览器解析完html的各种样式后触发的,所以可以在app.vue的created生命周期里面把动画样式移除 接下来是代码

  • Vue.js对象转换实例

    废话不多说了,直接给大家贴代码了.具体代码如下所示: var app = new Vue({ el: "#app", data: { login: { name: "", psd: "" } }, methods: { submit: function() { //转换成自己想要的对象 var obj = JSON.stringify(this.login); console.log(obj); axios.post("/login&q

  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码

    废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    iOS在微信浏览器回退是不重新加载页面的,有些时候是需要重新加载的,所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener("popstate", function(e){ alert("回退!"); //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样. //window.histor

随机推荐