vue 實現邊輸入邊搜索功能的實例講解
更新時間：2018年09月16日 13:59:24 作者：zhooson
今天小編就為大家分享一篇vue 實現邊輸入邊搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
效果圖：
搜索分類2種情況，一般的是當用戶輸入完，點擊確定的按鈕在向后發(fā)送請求，還有一種就是的我一邊輸入，一邊向后臺發(fā)送請求，但是會產生一個性能的問題，就是一直發(fā)請求造成頁面的卡頓，這里就是使用截流函數,當用戶每次點擊鍵盤之間超過300ms就發(fā)送請求，否則不請求
search.vue
<template> <div id="search"> <input type="text" class="search" placeholder="搜索" v-model.trim="title" /> </div> </template>
js：
<script>
// 節(jié)流函數
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 Router的手寫實現方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個項目的方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數的方法的寫法，對vue?react組件暴露方法相關知識感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了Vue中使用keepAlive不緩存問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
本文詳細介紹了如何在Vue3項目中集成Electron,包括安裝electron和electron-builder兩個依賴,以及配置.npmrc文件和手動修改鏡像源的方法,整個過程詳細記錄了從創(chuàng)建項目、安裝依賴、修改配置、到最終打包部署的每一步2024-10-10
???????基于el-table和el-pagination實現數據的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現數據的分頁效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了如何基于Vue3實現一個小相冊效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了nuxtjs中如何對axios二次封裝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue使用v-if v-show頁面閃爍,div閃現的解決方法
在頁面層次結構，數據較多的時候，用v-if或者v-show就會出現div閃現，或者部分閃爍的結果。怎么處理這樣的問題呢，下面小編給大家?guī)砹藇ue使用v-if v-show頁面閃爍,div閃現的解決方法，一起看看吧2018-10-10