vue之延时刷新实例
更新时间：2019年11月14日 10:20:05 作者：兮川
今天小编就为大家分享一篇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之延时刷新实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，本文讲给大家详细分析Vue路由Hash模式，文中有相关的代码示例供大家参考，感兴趣的同学可以借鉴一下2023-06-06
基于Vue + Axios实现全局Loading自动显示关闭效果
在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框（Loading）,然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下2024-03-03
解决webpack+Vue引入iView找不到字体文件的问题
今天小编就为大家分享一篇解决webpack+Vue引入iView找不到字体文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3的自定义hook函数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,下面这篇文章主要给大家介绍了关于vue3和ts封装axios以及使用mock.js的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了Vue.directive使用注意(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue树形结构样式和功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue项目无法删除的问题及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue页面跳转传递参数及接收方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论