快捷導(dǎo)航

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

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

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

效果圖：

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

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: '寫(xiě)上你的URL',
  method: 'GET',
  params: { title: this.title },
  });
  this.search = res.data.list;
 },
 },
 mounted() {},
};
</script>

以上這篇vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對(duì)這四大金剛做了詳細(xì)介紹，本文重點(diǎn)是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧
2018-04-04
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue3實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下
2023-10-10
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中，給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實(shí)現(xiàn)Json格式數(shù)據(jù)展示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于 Vue 的樹(shù)形選擇組件的示例代碼
本篇文章主要介紹了基于 Vue 的樹(shù)形選擇組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
解決IOS端微信H5頁(yè)面軟鍵盤彈起后頁(yè)面下方留白的問(wèn)題
微信H5項(xiàng)目，ios端出現(xiàn)了軟鍵盤輸完隱藏后頁(yè)面不會(huì)回彈，下方會(huì)有一大塊留白。這篇文章主要介紹了決微信H5頁(yè)面軟鍵盤彈起后頁(yè)面下方留白的問(wèn)題（iOS端） ,需要的朋友可以參考下
2019-06-06
vue-cli構(gòu)建項(xiàng)目使用 less的方法
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目使用 less，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))
對(duì)于很多使用vscode編寫(xiě)vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue 之 css module的使用方法
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開(kāi)了css權(quán)重和類名重復(fù)的問(wèn)題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-12-12
axios中post請(qǐng)求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù),相比于原生的XMLHttpRequest對(duì)象,axios簡(jiǎn)單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請(qǐng)求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下
2022-10-10