前言

所謂模糊查詢就是不需要使用者完整的輸入或者說全部輸入資訊即可提供查詢服務，也就是使用者可以在邊輸入的同時邊看到提示的資訊（其實是查詢出來匹配到的資訊），百度的搜尋功能就是很好的模糊查詢的例子；其實模糊查詢的原理就是給輸入框繫結oninput事件監聽使用者輸入情況，然後每次www.cppcns.com使用者只要在輸入框中輸入了資訊就觸發事件進行查詢然後實時展示；原理很簡單，但是實現起來會有一些問題，我們可以想想，每輸入一個字元都會觸發事件，那如果我們需要輸入很長的資訊呢，那查詢是不是就得觸發多次？ajax連續多次觸發，再加上如果我們的方法體中有操作DOM元素的方法，那麼必然會給我們的瀏覽器進入假死甚至崩潰狀態；那麼我們有沒有辦法來解決此類問題呢？答案是：有的

實現模糊查詢

通過watch和computed實現Vue實現模糊查詢

計算方法能實現的偵聽方法也能夠實現，但推薦使用計算方法，應為偵聽方法比較冗雜

先看看下面的程式碼實現

通過computed（計算方法）實現

通過watch實現

html程式碼
<div id="root">
        <h2>人員列表</h2>
        <input type="text" placeholder="請輸入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :ke
 
y="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

script程式碼
new Vue({
        el:"#root",data:{
            keyWord:'',persons:[

                {id:'001',name:'馬冬梅',age:18,sex:'女'},{id:'002',name:'周冬雨',age:19,{id:'003',name:'周杰倫',age:21,sex:'男'},{id:'004',name:'溫兆倫',age:22,sex:'男'}
        ],},computed:{
            filPersons(){
                return this.persons.filter((p)=>{//返回過濾後的陣列
                    return p.name.indexOf(this.keyWord) !==-1
                })//filter是過濾函式去除了不包含關鍵字的情況
            }
        }
    })

通過watch函式監測框的值是否變化

html程式碼不變
script程式碼
new Vue({
        el:"#root",filPersons:[//如果沒有此的話，persons的值改變就無法變回原來了

        ]
        
        },watch:{
            keyWord:{
                immediate:true,//在框的值還沒變化時執行如下函式顯示出所有的情況
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
         客棧   }
            
        }
    })

總結

到此這篇關於Vue實現模糊查詢的文章就介紹到這了,更多相關Vue實現模糊查詢內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！