vue实现Input输入框模糊查询方法

本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下

原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

下面先看示例：

搜索前：

搜索后：

实现方法：

methods:{
 // 点击搜索工程
 search(){
  // 支持模糊查询
  // this.xmgcqkJsonsData：用于搜索的总数据
 　 //　toLowerCase():用于把字符串转为小写，让模糊查询更加清晰
  let _search = this.jobNo.toLowerCase();
  let newListData = []; // 用于存放搜索出来数据的新数组
  if (_search) {
  this.xmgcqkJsonsData.filter(item => {
   if (item.code.toLowerCase().indexOf(_search) !== -1) {
    newListData.push(item);
   }
  })
  }
  this.xmgcqkJsonsData = newListData;
  // console.log(‘新数组',newListData)
 },
}

以上方法是根据 工单号/流水号 进行查询的，如果在当前基础上增加对其它条件的搜索，比如 项目/工程名称，那只需要在原来的代码上增加一个判断条件即可，如：

if (item.code.toLowerCase().indexOf(_search) !== -1 || item.name.toLowerCase().indexOf(_search) !== -1) {
 newListData.push(item);
 }

这就是如何实现vue input输入框模糊查询的方法。

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

  • vue遍历生成的输入框 绑定及修改值示例

    对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作.这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义. 思路 获取生成的输入框数量 初始化数组,数组的长度与待绑定输入框数量一致 将每一个输入框的v-model与数组特定项进行绑定 实现代码 1.data中定义一个存放model值的空数组 data() { return { inputData :[] } } 2.将获取到的数组遍历,将获取到的值插入空数组 res.data.rows.map(v.

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se

  • vue实现Input输入框模糊查询方法

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

  • vue实现input输入模糊查询的三种方式

    vue实现input输入模糊查询的三种方式

    目录 1 计算属性实现模糊查询 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html 文件,代码直接放入即可. 这里自己导入 vue,我是导入本地已经下载好的. <script src="./lib/vue-2.6.12.js"></script> 演示: 打开默认显示全部 输入关键字模糊查询,名字和年龄都可以 完整代码如下: <!DOCTYPE html> &l

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

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

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

  • 基于input动态模糊查询的实现方法

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

  • 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.js input框之间赋值方法

    如下所示: demo.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> </head> <body> <form action="" id="demo"> <input type="text" va

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • vue原生input输入框原理剖析

    目录 正文 v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据. 如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值. 只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新

  • mysql中使用instr进行模糊查询方法介绍

    在mysql中使用内部函数instr,可代替传统的like方式查询,并且速度更快. instr 函数,第一个参数是字段,第二个参数是要查询的串,返回串的位置,第一个是1,如果没找到就是0. 例如,查询字段name中带"军"的名字,传统的方法是: select name from 用户表 where name like `%军%'; 用instr的方法: select name from 用户表 where instr('name','军'); 或: select name from 用

  • Java模糊查询方法详解

    当我们需要开发一个方法用来查询数据库的时候,往往会遇到这样一个问题:就是不知道用户到底会输入什么条件,那么怎么样处理sql语句才能让我们开发的方法不管接受到什么样的条件都可以正常工作呢?这时where '1'='1'加上list就可以完美解决这个问题了,废话少说,上代码: // 模糊查询方法 public List<person> query() { List<person> list = new ArrayList<>(); Connection con = null

随机推荐