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如何实现模糊查询”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！