快捷導(dǎo)航

Vue實現(xiàn)模糊查詢的簡單方法實例

更新時間：2021年08月06日 09:45:29 作者：@怎擾

這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)模糊查詢的簡單方法,在vue中,前端模糊搜索主要是用computed屬性實現(xiàn),本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

所謂模糊查詢就是不需要用戶完整的輸入或者說全部輸入信息即可提供查詢服務(wù)，也就是用戶可以在邊輸入的同時邊看到提示的信息（其實是查詢出來匹配到的信息），百度的搜索功能就是很好的模糊查詢的例子；其實模糊查詢的原理就是給輸入框綁定oninput事件監(jiān)聽用戶輸入情況，然后每次用戶只要在輸入框中輸入了信息就觸發(fā)事件進(jìn)行查詢?nèi)缓髮崟r展示；原理很簡單，但是實現(xiàn)起來會有一些問題，我們可以想想，每輸入一個字符都會觸發(fā)事件，那如果我們需要輸入很長的信息呢，那查詢是不是就得觸發(fā)多次？ajax連續(xù)多次觸發(fā)，再加上如果我們的方法體中有操作DOM元素的方法，那么必然會給我們的瀏覽器進(jìn)入假死甚至崩潰狀態(tài)；那么我們有沒有辦法來解決此類問題呢？答案是：有的

Vue實現(xiàn)模糊查詢

通過watch和computed實現(xiàn)Vue實現(xiàn)模糊查詢

計算方法能實現(xiàn)的偵聽方法也能夠?qū)崿F(xiàn)，但推薦使用計算方法，應(yīng)為偵聽方法比較冗雜

先看看下面的代碼實現(xiàn)

通過computed（計算方法）實現(xiàn)

通過watch實現(xiàn)

html代碼
<div id="root">
        <h2>人員列表</h2>
        <input type="text" placeholder="請輸入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="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,sex:'女'},
                {id:'003',name:'周杰倫',age:21,sex:'男'},
                {id:'004',name:'溫兆倫',age:22,sex:'男'}
        ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{//返回過濾后的數(shù)組
                    return p.name.indexOf(this.keyWord) !==-1
                })//filter是過濾函數(shù)去除了不包含關(guān)鍵字的情況
            }
        }
    })

通過watch函數(shù)監(jiān)測框的值是否變化

html代碼不變
script代碼
new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:[

                {id:'001',name:'馬冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:19,sex:'女'},
                {id:'003',name:'周杰倫',age:21,sex:'男'},
                {id:'004',name:'溫兆倫',age:22,sex:'男'}
        ],
        filPersons:[//如果沒有此的話，persons的值改變就無法變回原來了

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