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中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下2022-10-10
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决
在项目中使用elementui确实是很方便的一件事,下面这篇文章主要给大家介绍了关于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage样式失效解决的相关资料,需要的朋友可以参考下2023-02-02
最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2023-03-03
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue Class Component类组件用法，组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强2022-12-12
这篇文章主要介绍了vue项目上传Github预览的实现示例，在完成Vue项目以后，在上传到github并实现预览2018-11-11
这篇文章主要介绍了Vant的Tabbar标签栏引入自定义图标方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
PDF.js是一个开源的JavaScript库,用于在网页上渲染和显示PDF文件,在Vue中使用PDF.js来预览PDF文件是很常见的需求,这篇文章主要给大家介绍了关于vue如何使用pdf.js实现在线查看pdf文件功能的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
最新评论