快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

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

通過(guò)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)=>{//返回過(guò)濾后的數(shù)組
                    return p.name.indexOf(this.keyWord) !==-1
                })//filter是過(guò)濾函數(shù)去除了不包含關(guān)鍵字的情況
            }
        }
    })

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

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:[//如果沒(méi)有此的話(huà)，persons的值改變就無(wú)法變回原來(lái)了

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