vue前端实现模糊查询,vue实现模糊搜索

　　本文主要介绍在vue中实现模糊查询的简单方法。在Vue中，前端模糊搜索主要通过计算属性来实现。本文通过示例代码非常详细的介绍了一下，有需要的朋友可以参考一下。

前言

　　所谓模糊查询，是指不需要用户完整输入或全部输入信息就可以提供查询服务，即用户在输入的同时可以看到提示信息(实际上是查询匹配的信息)。百度的搜索功能就是模糊查询的一个很好的例子。其实模糊查询的原理是将oninput事件绑定到输入框中来监控用户的输入，然后每当用户在输入框中输入信息时触发事件进行查询然后实时显示；原理很简单，但是实施起来会有一些问题。我们可以考虑一下。字符的每一次输入都会触发一个事件。如果我们需要输入非常长的信息，查询需要多次触发吗？Ajax连续多次触发，如果我们的方法体中有操作DOM元素的方法，我们的浏览器必然会进入假死甚至崩溃的状态；那么我们有什么办法解决这样的问题呢？答案是：可以。

Vue实现模糊查询

　　通过观察和计算实现模糊查询

　　能用计算法实现的截取方法也能实现，但推荐计算法，因为截取方法比较冗杂。

　　先看看下面的代码实现。

　　这是通过计算机(计算法)实现的

　　由手表实现

　　Html代码

　　div id=root

　　H2人物列表/h2

　　Type= text placeholder=请输入名称 v-model=keyWord

　　保险商实验所

　　li v-for=(p，index)of filpers :key= index

　　{{p.name}}-{{p.age}}-{{p.sex}}

　　/李

　　/ul

　　/div

　　脚本代码

　　新Vue({

　　el:#root ，

　　数据：{

　　关键词：，

　　人员：[

　　{id:001 ，姓名：马冬梅，年龄：18岁，性别：女 }，

　　{id:002 ，姓名：周冬雨，年龄：19，性别：女 }，

　　{id:003 ，姓名：周杰伦，年龄：21，性别：男 }，

　　{id:004 ，姓名：温兆伦，年龄：22岁，性别：男 }

　　],

　　},

　　计算值：{

　　filPersons

　　return . persons . filter((p)={//返回筛选后的数组

　　返回p.name.indexOf(this.keyWord)！==-1

　　})//filter是filter函数删除不包含的关键字的情况。

　　}

　　}

　　})

　　通过手表功能监控盒子的数值是否变化。

　　Html代码保持不变

　　脚本代码

　　新Vue({

　　el:#root ，

　　数据：{

　　关键词：，

　　人员：[

　　{id:001 ，姓名：马冬梅，年龄：18岁，性别：女 }，

　　{id:002 ，姓名：周冬雨，年龄：19，性别：女 }，

　　{id:003 ，姓名：周杰伦，年龄：21，性别：男 }，

　　{id:004 ，姓名：温兆伦，年龄：22岁，性别：男 }

　　],

　　FilPersons:[//如果没有这个东西，Persons的值就不能改回原来的值。

　　]

　　},

　　观察：{

　　关键词：{

　　Immediate:true，//在框的值没有变化的情况下执行下面的函数，显示所有的情况。

　　处理器(val){

　　this . fil persons=this . persons . filter((p)={

　　return p.name.indexOf(val)！==-1

　　})

　　}

　　}

　　}

　　})

总结

　　关于Vue模糊查询的这篇文章到此为止。有关Vue模糊查询的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。