vue如何實(shí)現(xiàn)輸入框的模糊查詢(xún)

  
　　　　　　　　//輸入框，綁定輸入框的值是變量input_value的值,然后對(duì)輸入框做了事件綁定keyup，在用戶(hù)輸入的時(shí)候會(huì)觸發(fā)
       
       
         
           
            {{item.id}}
            {{item.name}}
            {{item.time}}
         
      
    

從上述代碼中我們可以很明顯的看到DOM結(jié)構(gòu)，就是一個(gè)輸入框，我們給輸入框加了ref屬性是為了方便我們后面操作DOM拿到輸入框的值（詳情可見(jiàn)ref和$refs的區(qū)別博文https://www.jb51.net/article/167643.htm），然后下面有一個(gè)ul列表，不過(guò)ul列表是判斷展示的；（至于為什么會(huì)用v-show而不是v-if，可以點(diǎn)擊鏈接查閱之前的博文https://www.jb51.net/article/168984.htm）；

js數(shù)據(jù)邏輯層代碼：

 // 實(shí)例化 vue對(duì)象
    new Vue({
      el:"#app",
      data:{
        input_value:"",
        state:false,
        statu:true,
        dataList:[
        { id: "1001", name: "哈哈", time: "20170207" },
        { id: "1002", name: "呵呵", time: "20170213" },
        { id: "1103", name: "曉麗", time: "20170304" },  
        { id: "1104", name: "小蘭", time: "20170112" },
        { id: "1205", name: "財(cái)務(wù)", time: "20170203" },
        { id: "1206", name: "嘻嘻", time: "20170208" },
        { id: "1307", name: "測(cè)試", time: "20170201" }
       ],  
         list:[]
    },
    
    methods:{//觸發(fā)keyup事件之后觸發(fā)的方法
      search(){
　　　　　　//這個(gè)變量主要是用來(lái)測(cè)試節(jié)流后和不節(jié)流的區(qū)別
　　　　　　　　　　var i=0;
　　　　　　　　　　console.log(i++);

//定義的新數(shù)組存放篩選之后的數(shù)據(jù)
        this.list=[];
        //拿到當(dāng)前input輸入框輸入的值
        this.input_value=this.$refs.input.value;
        //判斷展示ul列表，如果輸入了就展示沒(méi)輸入就不展示
        if(this.input_value.length>0){
          this.state=true;
        }else{
          this.state=false;
        }
        
        //循環(huán)模擬數(shù)據(jù)的數(shù)組
        this.dataList.map((msg)=>{
          //拿當(dāng)前json的id、name、time去分別跟輸入的值進(jìn)行比較
          //indexOf 如果在檢索的字符串中沒(méi)有出現(xiàn)要找的值是會(huì)返回-1的，所以我們這里不等于-1就是假設(shè)輸入框的值在當(dāng)前json里面找到的情況
          if(msg.id.indexOf(this.input_value)!=-1  || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){
            //然后把當(dāng)前json添加到list數(shù)組中
            this.list.push(msg);
          }
        })
      },
    }
  })

js數(shù)據(jù)邏輯層代碼其實(shí)不難，主要就是給input綁定了keyup事件，在用戶(hù)輸入的時(shí)候會(huì)觸發(fā)search事件，用戶(hù)每輸入一個(gè)字符都會(huì)觸發(fā)一次；然后我們通過(guò)this.$refs.input.value來(lái)獲取輸入框當(dāng)前的值并賦值給變量this.input_value，然后我們對(duì)this.input_value的長(zhǎng)度進(jìn)行判斷來(lái)實(shí)現(xiàn)對(duì)用戶(hù)是否輸入的判斷，如果用書(shū)輸入了我們就把v-show綁定的值state賦值給true，反之則賦值為false；然后我們來(lái)用ES6的map方法來(lái)循環(huán)我們的dataList數(shù)組，dataList數(shù)組的數(shù)據(jù)是模擬后臺(tái)接口數(shù)據(jù)，通過(guò)indexOf方法是否等于-1來(lái)進(jìn)行判斷當(dāng)前json里面是否有輸入框中輸入的數(shù)組，indexOf是javascript提供的操作字符串方法，調(diào)用方式：string.indexOf("要查詢(xún)的值")，如果str中沒(méi)有要查詢(xún)的值會(huì)返回我們-1，如果有會(huì)直接返回給我們查詢(xún)數(shù)據(jù)的當(dāng)前下標(biāo)；所以我們可以借助indexOf是否等于-1來(lái)進(jìn)行判斷當(dāng)前json中是否有我們要查詢(xún)的字符串；如果有的話(huà)，我們只需要把當(dāng)前json添加到空數(shù)組list中即可，然后li綁定list展示；

效果圖如下：

到這里我們就可以看到我們要的模糊查詢(xún)功能已經(jīng)實(shí)現(xiàn)了，但是我們上面講到模糊查詢(xún)會(huì)影響瀏覽器的性能，從控制臺(tái)輸入的變量i的值可以看到我們的search方法已經(jīng)被調(diào)用了8次，我們輸入的字符越長(zhǎng)被調(diào)用的次數(shù)越多，如果方法里面有操作DOM的行為性能影響會(huì)更嚴(yán)重；所以我們現(xiàn)在來(lái)加上節(jié)流函數(shù)來(lái)看看：

  //節(jié)流函數(shù)
      throttle(){
        //保持this的指向始終指向vue實(shí)例
        var that=this;
        if(!that.statu){
          return;
        }  
        that.statu=false;
        setTimeout(function(){
          console.log(new Date());
          that.search();
          that.statu=true;
        },1000)
      },

我們把我們寫(xiě)的節(jié)流函數(shù)封裝在throttle里面執(zhí)行，把@keyup綁定的點(diǎn)擊事件修改為throttle，當(dāng)用戶(hù)輸入字符的時(shí)候觸發(fā)節(jié)流函數(shù)；

效果圖如下：

我們可以從控制臺(tái)很清晰的看到當(dāng)我們使用節(jié)流函數(shù)的時(shí)候，當(dāng)我們輸入了8個(gè)字符我們的方法只執(zhí)行了兩次，并且執(zhí)行時(shí)間是每隔一秒執(zhí)行一次，一個(gè)方法執(zhí)行2次肯定會(huì)比執(zhí)行8次不管是在效率還是在性能方面都會(huì)是比較大的提升，用了節(jié)流函數(shù)之后相對(duì)上面沒(méi)用的節(jié)流函數(shù)來(lái)說(shuō)，我們極大的實(shí)現(xiàn)了性能提升、優(yōu)化，所以在高頻率觸發(fā)的事件中我們是可以建議用節(jié)流函數(shù)來(lái)進(jìn)行控制和解決問(wèn)題的；

關(guān)于“vue如何實(shí)現(xiàn)輸入框的模糊查詢(xún)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。