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

更新时间：2018年09月16日 13:59:24 作者：zhooson

今天小编就为大家分享一篇vue 实现边输入边搜索功能的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

效果图：

搜索分类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 实现边输入边搜索功能的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue使用NPM方式搭建项目
这篇文章主要介绍了Vue项目搭建过程，使用NPM方式搭建的，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-10-10
vue内嵌iframe跨域通信的实例代码
这篇文章主要介绍了vue内嵌iframe跨域通信,主要介绍了Vue组件中如何引入iframe，vue如何获取iframe对象以及iframe内的window对象，结合实例代码给大家介绍的非常详细需要的朋友可以参考下
2022-11-11
Vue中jsx不完全应用指南小结
这篇文章主要介绍了Vue中jsx不完全应用指南小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue3在jsx中使用component组件方式
这篇文章主要介绍了vue3在jsx中使用component组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现内容可滚动的弹窗效果
这篇文章主要为大家详细介绍了vue实现内容可滚动的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue 2.0 基础详细
这篇文章主要介绍了Vue 2.0 基础，具体内容有、基本语法、生命周期、路由管理Vue-Router、状态管理Vuex、Http请求库Axios，想详细了解的小伙伴请和现编一起学习下面文章内容吧
2021-10-10
前端vue3项目中百度地图的使用api以及操作实例
最近项目要用到百度地图api,好久没用到地图,就百度了一番,但是找了好几篇文章,发现都没办法成功实现,现将方法记录如下,下面这篇文章主要给大家介绍了关于前端vue3项目中百度地图的使用api以及操作实例,需要的朋友可以参考下
2023-05-05
详解vue 组件之间使用eventbus传值
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue、react等单页面项目部署到服务器的方法及vue和react的区别
这篇文章主要介绍了vue、react等单页面项目部署到服务器的方法,需要的朋友可以参考下
2018-09-09
buildAdmin开源项目引入四种图标方式详解
这篇文章主要为大家介绍了buildAdmin开源项目引入四种图标方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02