<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：模拟input输入文本搜索远程数据，添加防抖</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-row :span="16">
<el-input v-model="input1" @input="input1Fun"></el-input>
<div>文本1:{{ text1 }}</div>
</el-row>
<el-row :span="16">
<el-input v-model="input2" @input="input2Fun"></el-input>
<div>文本2:{{ text2 }}</div>
</el-row>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
input1: '',
input2: '',
text1: "",
text2: "",
timer: null,
}
},
created() {
},
methods: {
// 模拟不防抖
input1Fun() {
this.text1 = this.input1
},
// 模拟防抖函数，防抖动是将多次执行变为最后一次执行
input2Fun() {
// 清除之前的定时器
clearTimeout(this.timer);
// 设置新的定时器
this.timer = setTimeout(() => {
// 在定时器结束时执行函数逻辑
// 模拟异步
this.text2 = this.input2
}, 1000); // 设置防抖的时间间隔，例如500毫秒
},
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。