快捷導(dǎo)航

關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼

更新時間：2019年09月17日 09:58:15 作者：Vam的金豆之路

這篇文章主要介紹了關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

在這里插入圖片描述

我們經(jīng)常會遇到這種需求，現(xiàn)在我們在使用百度搜索的時候他們的思想也是

根據(jù)防抖節(jié)流而實現(xiàn)的，至于用防抖還是節(jié)流根據(jù)自己需求。

<template>
 <input type="text"  v-model.trim="sse">
</template>
<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
 name : 'search',
 watch : {
 sse () {
 delay(() => {
    this.search()
   }, 500)
},
methods ：{
 search () {
    this.$axios
     .get([url])
     .then(response => {
      // success
     })
     .catch(error => {
      // error
      alert('失?。?)
     })
}
}
}
}
</script>

知識點擴展：

關(guān)于各種Vue UI框架中加載進度條的正確使用

這里拿MUSE UI 中的進度條舉例

  <mu-circular-progress :size="40" class="icon" v-if="isloading"/>
  <div v-show="!isloading">
   <p>內(nèi)容</p>
  </div>

//數(shù)據(jù)初始化
 data () {
  return {
   isloading: false
  }
 },
 //頁面加載之前
 mounted () {
   this.isloading = true
   this.$axios
    .get([
     '/api/playlist/detail?id=' +
      this.$route.params.id
    ])
    .then(response => {
     // success
     // console.log(response.data)
     this.name = response.data.playlist.name
     this.list = response.data.playlist.tracks
     this.isloading = false
    })
    .catch(error => {
     // error
     alert('失??！')
     console.log(error)
    })
  }

頁面加載之前this.isloading = true

v-show='false'不顯示頁面

當(dāng)獲取數(shù)據(jù)完畢后

this.isloading = false

進度條消失，頁面顯示

總結(jié)

以上所述是小編給大家介紹的關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

前端token中4個存儲位置的優(yōu)缺點說明
這篇文章主要介紹了前端token中4個存儲位置的優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3中的動畫過渡實現(xiàn)技巧分享
在現(xiàn)代的前端開發(fā)中,用戶體驗的重要性不言而喻,為了讓應(yīng)用程序更加生動和引人注目,動畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實現(xiàn)動畫過渡,以及一些技巧和最佳實踐,需要的朋友可以參考下
2025-01-01
Vue項目中添加鎖屏功能實現(xiàn)思路
這篇文章主要介紹了Vue項目中添加鎖屏功能的實現(xiàn)思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
vue3封裝Element導(dǎo)航菜單的實例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
Vue基礎(chǔ)教程之條件渲染和列表渲染
Vue會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這么做會使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下
2021-11-11
vue+elementui實現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
el-table樹形數(shù)據(jù)序號排序處理方案
這篇文章主要介紹了el-table樹形數(shù)據(jù)序號排序處理方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-03-03
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue 動態(tài)路由的實現(xiàn)及 Springsecurity 按鈕級別的權(quán)限控制
這篇文章主要介紹了Vue 動態(tài)路由的實現(xiàn)以及 Springsecurity 按鈕級別的權(quán)限控制的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
vue利用openlayers加載天地圖和高德地圖
這篇文章主要介紹了?vue利用openlayers加載天地圖和高德地圖，下文章主要由兩部分完成openlayers加載天地圖和加載高德地圖，下面來看看詳細(xì)內(nèi)容吧,需要的朋友可以參考一下，希望對大家有所幫助
2021-11-11