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