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

發(fā)布時(shí)間：2020-08-28 07:41:18 來(lái)源：腳本之家閱讀：765 作者：zhooson 欄目：web開(kāi)發(fā)

效果圖：

搜索分類(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)擊鍵盤(pá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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽