vue 實現(xiàn)邊輸入邊搜索功能的實例講解
更新時間：2018年09月16日 13:59:24 作者：zhooson
今天小編就為大家分享一篇vue 實現(xiàn)邊輸入邊搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
效果圖：
搜索分類2種情況，一般的是當(dāng)用戶輸入完，點擊確定的按鈕在向后發(fā)送請求，還有一種就是的我一邊輸入，一邊向后臺發(fā)送請求，但是會產(chǎn)生一個性能的問題，就是一直發(fā)請求造成頁面的卡頓，這里就是使用截流函數(shù),當(dāng)用戶每次點擊鍵盤之間超過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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對這四大金剛做了詳細介紹，本文重點是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧2018-04-04
這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的九宮格抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下2023-10-10
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue如何實現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
微信H5項目，ios端出現(xiàn)了軟鍵盤輸完隱藏后頁面不會回彈，下方會有一大塊留白。這篇文章主要介紹了決微信H5頁面軟鍵盤彈起后頁面下方留白的問題（iOS端） ,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue-cli構(gòu)建項目使用 less，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對于很多使用vscode編寫vue項目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開了css權(quán)重和類名重復(fù)的問題，非常具有實用價值，需要的朋友可以參考下2018-12-12
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10