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

2024-07-29 13:26:36

1 计算属性实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

这里自己导入 vue，我是导入本地已经下载好的。

<script src="./lib/vue-2.6.12.js"></script>

演示：

打开默认显示全部

输入关键字模糊查询，名字和年龄都可以

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <table>
        <thead>
          <tr>
            <td>名字</td>
            <td>年龄</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in fillist" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          keyWord:'',
          list:[
            { name: '张三', age: '18' },
            { name: '张四', age: '17' },
            { name: '张五', age: '17' },
            { name: '老六', age: '18' },
            { name: '老八', age: '18' },
            { name: '小三', age: '19' },
            { name: 'Xingyue', age: '18' },
          ]
        },
        computed:{
          fillist(){
            // 返回过滤后的数组
            return this.list.filter((p)=>{
              return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
            })
          }
        }
      })
    </script>
  </body>
</html>

2 watch 监听实现模糊查询

vue 中通过watch 监听实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <table>
        <thead>
          <tr>
            <td>名字</td>
            <td>年龄</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in fillist" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          keyWord:'',
          list:[
            { name: '张三', age: '18' },
            { name: '张四', age: '17' },
            { name: '张五', age: '17' },
            { name: '老六', age: '18' },
            { name: '老八', age: '18' },
            { name: '小三', age: '19' },
            { name: 'Xingyue', age: '18' },
          ],
          fillist:[]
        },
        watch:{
          keyWord:{
            immediate:true,//在框的值还没变化时执行如下函数显示出所有的情况
            handler(val){
              this.fillist = this.list.filter((p)=>{
                return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
              })
            }
          }
        }
      })
    </script>
  </body>
</html>

演示和计算属性的一样。。

3 通过按钮点击实现模糊查询

这里我是在 vue-cli 中完成的，完整代码如下。

vue.app 代码：

<template>
  <div id="app">
    <!-- 输入框 -->
    <input type="text" v-model="value" placeholder="请输入姓名/年龄" />
    <!-- 查询按钮 -->
    <button @click="search">查询</button>
    <!-- 给table表格赋值 -->

    <table>
      <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,i) in tableData" :key="i">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      tableData: [
        { name: '张三', age: '18' },
        { name: '张四', age: '17' },
        { name: '张五', age: '17' },
        { name: '老六', age: '18' },
        { name: '老八', age: '18' },
        { name: '小三', age: '19' },
        { name: 'Xingyue', age: '18' },
      ],
      //表格B用原表格的数据
      tableDataB: [
        { name: '张三', age: '18' },
        { name: '张四', age: '17' },
        { name: '张五', age: '17' },
        { name: '老六', age: '18' },
        { name: '老八', age: '18' },
        { name: '小三', age: '19' },
        { name: 'Xingyue', age: '18' },
      ],
    };
  },
  methods: {
    // 点击搜索 支持模糊查询
    search() {
      //表格用原表格的数据 即 用于搜索的总数据
      this.tableData = this.tableDataB;
      //获取到查询的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
      let _search = this.value.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      if (_search) {
        //filter 过滤数组
        this.tableData.filter((item) => {
          // newListData中 没有查询的内容，就添加到newListData中
          if (
            item.name.toLowerCase().indexOf(_search) !== -1 ||
            item.age.toLowerCase().indexOf(_search) !== -1
          ) {
            newListData.push(item);
          }
        });
      }
      //查询后的表格 赋值过滤后的数据
      this.tableData = newListData;
    },
  },
}
</script>

<style></style>

main.js 代码如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

整体结构：

演示：

输入关键字，点击查询：

大小写模糊查询：

到此这篇关于vue实现input输入模糊查询的三种方式的文章就介绍到这了,更多相关vue input输入模糊查询内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

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

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

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

本文实例讲述了SqlServer2016模糊匹配的三种方式及效率问题.分享给大家供大家参考,具体如下: 数据库是Sqlserver 2016版现在业务需求是:要查询出企业名称为以下几个的,XXX,XXXX等等: 第一种方式:like '%XXX%' OR like '%XXXX%' select cName from tAccountAuditing where cName like '%测试moa000154%' OR cName like '%测试集团上海事业部%' and activeA
Mysql实现模糊查询的两种方式(like子句、正则表达式)

目录前言语法 like子句语法示例正则表达式语法说明: 示例总结通常在实际应用中,会涉及到模糊查询的需求,查询在 MySQL 中使用 SQL SELECT 命令来读取数据,有条件的查询可以在 SELECT 语句中使用 WHERE 子句来获取记录有时候我们需要获取某字段含有 “xxxxx” 字符的所有记录,这时就是模糊查询,下面介绍一下在MySQL中实现模糊查询的两种方式前言 MySQL 查询数据使用SQL SELECT语句语法 MySQL数据库中查询数据通用的 SELEC
MyBatis实现模糊查询的几种方式

在学习MyBatis过程中想实现模糊查询,可惜失败了.后来上百度上查了一下,算是解决了.记录一下MyBatis实现模糊查询的几种方式. 数据库表名为test_student,初始化了几条记录,如图: 起初我在MyBatis的mapper文件中是这样写的: <select id="searchStudents" resultType="com.example.entity.StudentEntity" parameterType="com.exampl
sqlServer实现分页查询的三种方式

目录一.offset /fetch next关键字二.利用max(主键) 三.利用row_number关键字总结 sqlServer的分页查询和mysql语句不一样,有三种实现方式.分别是:offset /fetch next.利用max(主键).利用row_number关键字一.offset /fetch next关键字 2012版本及以上才有,SQL server公司升级后推出的新方法. 公式: -- 分页查询公式-offset /fetch next select * from 表
Vue路由传参props解耦的三种方式小结

目录路由组件传参布尔模式对象模式函数模式总结路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 布尔模式商品展示界面传递id的动态参数 <template> <div class="home"> <TabBar></TabBar> <p>这是首页</p> <ul> &l
JS Select下拉框(支持输入模糊查询)

本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f
JS中Select下拉列表类(支持输入模糊查询)功能

下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY
基于input动态模糊查询的实现方法

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

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

目录

1 计算属性实现模糊查询

2 watch 监听实现模糊查询

3 通过按钮点击实现模糊查询

相关推荐

随机推荐