Vue实现模糊查询的简单方法实例

2024-08-18 17:55:11

前言

所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示的信息（其实是查询出来匹配到的信息），百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示；原理很简单，但是实现起来会有一些问题，我们可以想想，每输入一个字符都会触发事件，那如果我们需要输入很长的信息呢，那查询是不是就得触发多次？ajax连续多次触发，再加上如果我们的方法体中有操作DOM元素的方法，那么必然会给我们的浏览器进入假死甚至崩溃状态；那么我们有没有办法来解决此类问题呢？答案是：有的

Vue实现模糊查询

通过watch和computed实现Vue实现模糊查询

计算方法能实现的侦听方法也能够实现，但推荐使用计算方法，应为侦听方法比较冗杂

先看看下面的代码实现

通过computed（计算方法）实现

通过watch实现

html代码
<div id="root">
        <h2>人员列表</h2>
        <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实现模糊查询的文章就介绍到这了,更多相关Vue实现模糊查询内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue input输入框模糊查询的示例代码

Vue 模糊查询功能原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo
vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能
vue2过滤器模糊查询方法

如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model='search' /> &
vue实现Input输入框模糊查询方法

本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search
Vue实现模糊查询的简单方法实例

前言所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子:其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示:原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax连续多次触发,再加上如
mybatis 模糊查询的实现方法

mybatis 模糊查询的实现方法 mybatis的逆向助手确实好用,可以省去很多编写常规sql语句的时间,但是它没办法自动生成模糊查询语句,但开发中模糊查询是必不可少的,所以,需要手动对mapper编写模糊查询功能. 这里先明确MyBatis/Ibatis中#和$的区别: 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111", 如果传入的值是id,则解
ORACLE多条件统计查询的简单方法

前几天要做一个统计查询的功能,因为涉及多张表,多种条件的统计分析.一开始便想到了UNION和IF语句,然后写了1000多行代码,就为了查30条数据觉得不应该. 然后就开始百度,多种条件下的统计.然后有一种语法让我眼前一亮,case when then else end 当满足CASE设定的条件时,就可以执行then语句.由于我要做的分组查询统计,是要罗列每一种情况,而且根据输入的"管理员编号"不同返回不同结果,结果记录的条数和每一种情况是可知的,这个语法完全可用核心代码如下: SEL
在java List中进行模糊查询的实现方法

比如我有下面这样一个List,里面存放的是多个Employee对象.然后我想对这个List进行按照Employee对象的名字进行模糊查询.有什么好的解决方案么? 比如我输入的查询条件为"wang",那么应该返回只包含employee1的List列表. List list = new ArrayList(); Employee employee1 = new Employee(); employee1.setName("wangqiang"); employee1.s
Android 实现夜间模式的快速简单方法实例详解

ChangeMode 项目地址:ChangeMode Implementation of night mode for Android. 用最简单的方式实现夜间模式,支持ListView.RecyclerView. Preview Usage xml android:background="?attr/zzbackground" app:backgroundAttr="zzbackground"//如果当前页面要立即刷新,这里传入属性名称比如 R.attr.zzb
PHP模糊查询的实现方法(推荐)

模式查询 1. SQL匹配模式 2. 正则表达式匹配模式(一般不推荐使用) SQL匹配模式 1.使用sql匹配模式,不能使用操作符=或!=,而是使用操作符LIKE或NOT LIKE: 2.使用sql匹配模式,MYSQL提供了2种通配符. %表示任意数量的任意字符(其中包括0个) _表示任意单个字符 3.使用sql匹配模式,如果匹配格式中不包含以上2种通配符中的任意一个,其查询的效果等同于=或!= 4.使用sql匹配模式,匹配时,不区分大小写 #查询用户名以某个字符开头的用户 #查询用户名以字符'
Vue中遍历数组的新方法实例详解

1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key
Vue触发隐藏input file的方法实例详解

1.使用input透明覆盖法将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发 ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />
Vue中使用webpack别名的方法实例详解

在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么
基于input动态模糊查询的实现方法

最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的change()方法. 这个方法要失去所在的input框的焦点时,事件才会被触发,感觉有点鸡肋,也有可能是我没有完全会熟用这个方法,希望懂的大神可以分享一下使用秘籍. <input type="text" id="n3"/> var $n3=$("#n3)

Vue实现模糊查询的简单方法实例

前言

Vue实现模糊查询

总结

相关推荐

随机推荐