vue輸入框使用模糊搜索功能的實現(xiàn)代碼
實現(xiàn)原理:
利用js的 indexOf 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
模板中的代碼
<div class="search"> <!--輸入框使用的是vant的輸入框組件--> <van-search @input="autoSearch" v-model="value" placeholder="請輸入搜索關(guān)鍵詞" style="width:90%; display:inline-block;" /> <span>搜索</span> </div> <!--展示數(shù)據(jù)--> <ul v-for="(item) in allArea" :key="item.communityId" > <li v-if="allNewArea.length != 0">{{ item.communityName }}</li> <li v-else>{{ item.communityName }}</li> </ul>
js代碼
getAreaDetail () { // 獲取數(shù)據(jù) this.$http({ method: 'post', url: '/appProperty/getCommunity', }).then(res => { this.allArea = res.data this.allNewArea = res.data }) }, autoSearch () { // 模糊搜索加節(jié)流(500ms觸發(fā)一次) var allowPass = true if (!allowPass) { return } setTimeout(() => { allowPass = false this.allArea = []; this.allNewArea.filter(item => { if (item.communityName.indexOf(this.value) !== -1) { // 此處也可使用js的 search 方法實現(xiàn)indexOf 一樣效果 this.allArea.push(item); } }) }, 500); },
拓展
節(jié)流函數(shù) 節(jié)省流量節(jié)省內(nèi)存性能的一種函數(shù),可以理解為是一種性能優(yōu)化方案
//首先定義一個全局變量 當(dāng)瀏覽器窗口大小發(fā)生變化也就是重新計算窗口大小的時候觸發(fā) var canRun = true; window.onresize = function () { if (!canRun) { return } canRun = false//設(shè)置一個定時器進(jìn)行輪詢操作 setTimeout(function () {//這是要做的事情 console.log("函數(shù)節(jié)流")//最后記得重新賦值true繼續(xù)讓他取反 canRun = true//每隔1000毫秒也就是1秒鐘就執(zhí)行一次 }, 1000) }
防抖函數(shù) 當(dāng)事件觸發(fā)完成之后再延遲觸發(fā),并且只觸發(fā)一次;如果在觸發(fā)完成之前再次觸發(fā),則會再次刷新延遲
//定義方法即要做的事情 function fun(){ console.log('onresize') } //定義事件觸發(fā)要執(zhí)行的方法,兩個參數(shù)分別是傳入的要做的事情和定時器的毫秒數(shù) function debounce (fn, delay) { //定義一個變量作為等會清除對象 var handle; //這里用到了閉包,一個函數(shù)里面return另一個函數(shù),變量相互牽引導(dǎo)致垃圾回收機(jī)制不會銷毀handle變量 return function () { //在這里一定要清除前面的定時器,然后創(chuàng)建一個新的定時器 clearTimeout(handle) //最后這個定時器只會執(zhí)行一次也就是事件觸發(fā)完成之后延遲500毫秒再觸發(fā)(這里的變量賦值是跟定時器建立連接,進(jìn)行地址賦值,一定要重新賦值給handle handle = setTimeout(function () { fn() }, delay) } } //給瀏覽器添加監(jiān)聽事件resize window.addEventListener('resize', debounce(fun, 500));
兩者區(qū)別
- 防抖函數(shù)和節(jié)流函數(shù)都是用來提升性能優(yōu)化及用戶體驗的一種方案;
- 防抖函數(shù)只會執(zhí)行一次,且是最后觸發(fā)的那一次,而節(jié)流函數(shù)會規(guī)律性的執(zhí)行多次;
總結(jié)
到此這篇關(guān)于vue輸入框使用模糊搜索功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue輸入框模糊搜索內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3實現(xiàn)tabs導(dǎo)航欄點擊每個導(dǎo)航項有下劃線動畫效果
這篇文章主要介紹了vue3實現(xiàn)tabs導(dǎo)航欄點擊每個導(dǎo)航項有下劃線動畫效果,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07Vue中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05公共Hooks封裝useTableData表格數(shù)據(jù)實例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12