vue 实现边输入边搜索功能的实例讲解

时间:2021-05-26

效果图:

搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求

search.vue

<template> <div id="search"> <input type="text" class="search" placeholder="搜索" v-model.trim="title" /> </div></template>

js:

<script>// 节流函数const delay = (function() { let timer = 0; return function(callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); };})();export default { name: 'search', data() { return { title: '', search:[] }; }, watch: { //watch title change title() { delay(() => { this.fetchData(); }, 300); }, }, methods: { async fetchData(val) { const res = await this.fetch({ url: '写上你的URL', method: 'GET', params: { title: this.title }, }); this.search = res.data.list; }, }, mounted() {},};</script>

以上这篇vue 实现边输入边搜索功能的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章