Vue如何實現模糊查詢

這篇文章主要介紹Vue如何實現模糊查詢，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Vue實現模糊查詢

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

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

先看看下面的代碼實現

通過computed（計算方法）實現

通過watch實現

html代碼
<div id="root">
        <h3>人員列表</h3>
        <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)=>{//返回過濾后的數組
                    return p.name.indexOf(this.keyWord) !==-1
                })//filter是過濾函數去除了不包含關鍵字的情況
            }
        }
    })

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

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,//在框的值還沒變化時執行如下函數顯示出所有的情況
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                    return p.name.indexOf(val) !==-1
                })
                }
            }
            
        }
    })

以上是“Vue如何實現模糊查詢”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！