這篇文章主要為大家展示了vue如何實現(xiàn)輸入框使用模糊搜索功能，內(nèi)容簡而易懂，希望大家可以學(xué)習一下，學(xué)習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的東興網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
實現(xiàn)原理:
利用js的 indexOf 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
模板中的代碼
搜索
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)化方案
//首先定義一個全局變量 當瀏覽器窗口大小發(fā)生變化也就是重新計算窗口大小的時候觸發(fā)
var canRun = true;
window.onresize = function () {
if (!canRun) {
return
}
canRun = false//設(shè)置一個定時器進行輪詢操作
setTimeout(function () {//這是要做的事情
console.log("函數(shù)節(jié)流")//最后記得重新賦值true繼續(xù)讓他取反
canRun = true//每隔1000毫秒也就是1秒鐘就執(zhí)行一次
}, 1000)
}防抖函數(shù)當事件觸發(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)致垃圾回收機制不會銷毀handle變量
return function () { //在這里一定要清除前面的定時器，然后創(chuàng)建一個新的定時器
clearTimeout(handle) //最后這個定時器只會執(zhí)行一次也就是事件觸發(fā)完成之后延遲500毫秒再觸發(fā)（這里的變量賦值是跟定時器建立連接，進行地址賦值，一定要重新賦值給handle
handle = setTimeout(function () {
fn()
}, delay)
}
}
//給瀏覽器添加監(jiān)聽事件resize
window.addEventListener('resize', debounce(fun, 500));兩者區(qū)別
以上就是關(guān)于vue如何實現(xiàn)輸入框使用模糊搜索功能的內(nèi)容，如果你們有學(xué)習到知識或者技能，可以把它分享出去讓更多的人看到。
