快捷導(dǎo)航

Vue實(shí)現(xiàn)模糊查詢filter()實(shí)例詳解

更新時(shí)間：2023年04月10日 09:47:39 作者：陌一一

因?yàn)榻赵趯W(xué)習(xí)并使用VUE,客戶有一個(gè)要求,要輸入框可模糊查詢并帶有下拉提示的應(yīng)用,數(shù)據(jù)從接口取,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)模糊查詢filter()的相關(guān)資料,需要的朋友可以參考下

需求：在輸入框里輸入內(nèi)容，包含相關(guān)內(nèi)容的值被篩選出來；

圖示：

最初的代碼：

<body>
    <div id="box">
        <input type="text" @input="handleInput()" v-model="mytext">
        <ul>
            <li v-for="item in datalist" :key="item">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:"",
                datalist:["aaa","add","bbb","bbc","ccc","ddd","abd"]
            },
            methods:{
                handleInput(){
                    console.log("input",this.mytext)
                    this.datalist=this.datalist.filter(item=>item.includes(this.mytext))//篩選出來包含輸入框值的元素
                    //然后賦值給原數(shù)組，因?yàn)閒ilter不會(huì)改變?cè)瓟?shù)組，所以要用賦值的辦法使得原數(shù)組改變，進(jìn)而改變dom
                }
            }
        })
    </script>
</body>

思路分析：

input、change事件選擇：

首先我們要獲取輸入框里的內(nèi)容，知道輸入框當(dāng)前的內(nèi)容才能進(jìn)行篩選，事件有兩種可以選擇：input和change，我們使用了input，它的作用是：只要輸入框的value發(fā)生改變就會(huì)觸發(fā)；為什么不用change，因?yàn)樗淖饔檬牵寒?dāng)value值發(fā)生改變而且輸入框失去焦點(diǎn)的時(shí)候才能觸發(fā)，也就是如果我們改變了輸入框的值，但是鼠標(biāo)一直放在輸入框中沒失去焦點(diǎn)，它也是不會(huì)觸發(fā)的，我們需要的是輸入框每次改變，就進(jìn)行篩選，所以說change是不行的。

v-model的使用：

使用v-model的原因是能拿到輸入框的值，把它放在input事件的回調(diào)函數(shù)里，就可以實(shí)現(xiàn)每次輸入框的值改變就能拿到相應(yīng)的值。
也就是“console.log("input",this.mytext)”這句代碼的含義。

filter的用法：

filter（回調(diào)函數(shù)）：filter方法具有篩選功能，篩選出來符合條件的值，參數(shù)是回調(diào)函數(shù)，本來的寫法是下面這樣，代碼中用的是箭頭函數(shù)的寫法，箭頭函數(shù)寫法可以省略function，（），{}和return（當(dāng)然是在一定條件限制下，上面的代碼符合這個(gè)要求，所以可以省略）。箭頭后面寫的是判斷條件。

filter(function(){
            return 判斷條件
        })

includes方法：

這個(gè)方法是字符串的一個(gè)方法，可以找出來包含某個(gè)內(nèi)容的所有元素。

覆蓋原數(shù)組的原因：

篩選完以后要賦值給原數(shù)組是因?yàn)?，必須改變?cè)瓟?shù)組，才能實(shí)現(xiàn)dom的更新，而filter方法不會(huì)改變?cè)瓟?shù)組，所以要用賦值的方法。

為什么要重新賦值一個(gè)數(shù)組originList：

因?yàn)槿绻凑障旅孢@個(gè)方法：

結(jié)果是，當(dāng)你輸入一個(gè)“a”，篩選出來了包含a的元素，然后數(shù)組就改變成只包含a的元素的值了，比如數(shù)組變?yōu)閇"aaa","add",'abd"]，然后下一次想在數(shù)組上去查其他的元素，比如查“c”相關(guān)的元素，就查不到了，因?yàn)樵瓟?shù)組已經(jīng)被改變了，回不去了。所以這就有問題了，因?yàn)槲覀兿朊看味荚谠瓟?shù)組的基礎(chǔ)上進(jìn)行查。有幾種解決辦法：

（1）方法一：上面那個(gè)復(fù)制一個(gè)新的數(shù)組出來，每次在新數(shù)組上查詢，再賦值給datalist數(shù)組進(jìn)行顯示，這樣新數(shù)組始終是不會(huì)改變的，所以這樣就能保證我們每次查詢都是在完整的數(shù)組上查詢的。代碼見：（在原來的代碼中更改的部分）

每次從老數(shù)組里面過濾賦值給新數(shù)組，就能保證“回不去的問題”

結(jié)果：

（2） 方法二：定義一個(gè)函數(shù)表達(dá)式，通過返回篩選后的結(jié)果，重新讓li遍歷

<body>
    <div id="box">
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="item in test()" :key="item">
                {{item}}
            </li>
        </ul>
        <!-- 定義一個(gè)函數(shù)表達(dá)式 -->
        <!-- {{test()}} -->
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:"",
                datalist:["aaa","add","bbb","bbc","ccc","ddd","abd"],
            },
            methods:{
                test(){
                    return this.datalist.filter(item=>item.includes(this.mytext))
                }
            }
        })
    </script>
</body>