vue input模糊查询（模糊搜索）功能

声明：1，下面内容是在vue手脚架中进行的，即 npm 打开的 vue 工程中进行的。

2，并用 npm 下载了 element-UI 组件。如果感觉不方便，可以换成你方便的table表格。

根据姓名（name）或者年龄（age）查询（支持小写查询）：

<template>

  <div id="app">

    <!-- 输入框 -->

    <input type="text" v-model="value" placeholder="请输入姓名/年龄" />

    <!-- 查询按钮 -->

    <button @click="search">查询</button>

    <!-- 给table表格赋值 -->

    <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>

      <el-table-column prop="age" label="年龄"> </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  data() {

    return {

      value: '',

      tableData: [

        { name: '小明', age: '18' },

        { name: '小红', age: '17' },

        { name: '桃红', age: '17' },

        { name: '桃儿', age: '18' },

        { name: '老A', age: '18' },

        { name: 'Blue', age: '18' },

      ],

      //表格B用原表格的数据

      tableDataB: [

        { name: '小明', age: '18' },

        { name: '小红', age: '17' },

        { name: '桃红', age: '17' },

        { name: '桃儿', age: '18' },

        { name: '老A', age: '18' },

        { name: 'Blue', 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>

#app {

  width: 1024px;

  margin: 0 auto;

}

</style>

欢迎各位大佬指导批评！