快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

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

通過watch實(shí)現(xiàn)

html代碼
<div id="root">
        <h2>人員列表</h2>
        <input type="text" placeholder="請(qǐng)輸入名字" 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,//在框的值還沒變化時(shí)執(zhí)行如下函數(shù)顯示出所有的情況
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
            }
            
        }
    })