vue 實現(xiàn)邊輸入邊搜索功能的實例講解

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

今天小編就為大家分享一篇vue 實現(xiàn)邊輸入邊搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

效果圖：

搜索分類2種情況，一般的是當用戶輸入完，點擊確定的按鈕在向后發(fā)送請求，還有一種就是的我一邊輸入，一邊向后臺發(fā)送請求，但是會產(chǎn)生一個性能的問題，就是一直發(fā)請求造成頁面的卡頓，這里就是使用截流函數(shù),當用戶每次點擊鍵盤之間超過300ms就發(fā)送請求，否則不請求

search.vue

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

js：

<script>
// 節(jié)流函數(shù)
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 實現(xiàn)邊輸入邊搜索功能的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue Router的手寫實現(xiàn)方法實現(xiàn)
這篇文章主要介紹了Vue Router的手寫實現(xiàn)方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
基于Vue-cli的一套代碼支持多個項目
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個項目的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關知識感興趣的朋友跟隨小編一起看看吧
2022-11-11
解決Vue中使用keepAlive不緩存問題
這篇文章主要介紹了Vue中使用keepAlive不緩存問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
vue3集成electron的過程
本文詳細介紹了如何在Vue3項目中集成Electron,包括安裝electron和electron-builder兩個依賴,以及配置.npmrc文件和手動修改鏡像源的方法,整個過程詳細記錄了從創(chuàng)建項目、安裝依賴、修改配置、到最終打包部署的每一步
2024-10-10
???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
基于Vue3實現(xiàn)一個小相冊詳解
這篇文章主要為大家詳細介紹了如何基于Vue3實現(xiàn)一個小相冊效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-12-12
vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
nuxtjs中如何對axios二次封裝
這篇文章主要介紹了nuxtjs中如何對axios二次封裝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法
在頁面層次結(jié)構(gòu)，數(shù)據(jù)較多的時候，用v-if或者v-show就會出現(xiàn)div閃現(xiàn)，或者部分閃爍的結(jié)果。怎么處理這樣的問題呢，下面小編給大家?guī)砹藇ue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法，一起看看吧
2018-10-10