vue三种模糊查询方式

前两种模糊查询根据输入的值直接查询（效果如图）

   ![](https://img-blog.csdnimg.cn/ef9c328c051d422a90b33748c3631d19.png)

     ![](https://img-blog.csdnimg.cn/bb76c1e3b7ce456c875cb87c05116993.png)

最后一种模糊查询通过点击按钮查询（视情况定）

    ![](https://img-blog.csdnimg.cn/8ed70144aaea4c348974695c2c33340f.png)

  ![](https://img-blog.csdnimg.cn/709180497bd7442b9933668514b75ef6.png)

模糊查询方式一(计算属性)

<template>
    <div>
        <input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
        <table>
            <tbody>
                <tr v-for="(item,index) in filterList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                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:{
            filterList(){
                return this.list.filter(item=>{
                    return item.name.indexOf(this.keyWord)!==-1 || item.age.indexOf(this.keyWord)!==-1
                })
            }
        }
    }
</script>

<style>
</style>

模糊查询方式二(监听属性)

<template>
    <div>
        <input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
        <table>
            <tbody>
                <tr v-for="(item,index) in filterList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keyWord: '',
                filterList:[],
                 list:[
                        { name: '张三', age: '18' },
                        { name: '张四', age: '17' },
                        { name: '张五', age: '17' },
                        { name: '老六', age: '18' },
                        { name: '老八', age: '18' },
                        { name: '小三', age: '19' },
                        { name: 'Xingyue', age: '18' }
                          ],
            }
        },
        watch:{
            keyWord:{
                //立即监听 
                immediate:true,
                //监听输入值发生改变时把过滤的数据赋值给新数组
                handler(val){
                    this.filterList =  this.list.filter(item=>{
                        return item.name.indexOf(this.keyWord) !==-1 || item.age.indexOf(this.keyWord) !== -1
                    })
                }
            }
        }
    }
</script>

<style>
</style>

模糊查询方式三(点击按钮搜索查询)

<template>
    <div>
        <input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
        <table>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
        <button @click="search" style="width: 200rpx;background-color: #3CA0F6;">查询</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keyWord: '',
                 list:[
                        { name: '张三', age: '18' },
                        { name: '张四', age: '17' },
                        { name: '张五', age: '17' },
                        { name: '老六', age: '18' },
                        { name: '老八', age: '18' },
                        { name: '小三', age: '19' },
                        { name: 'Xingyue', age: '18' }
                          ],
            }
        },
        methods: {
            search() {
              //获取输入的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
              let _keyWord = this.keyWord.toLowerCase();
              let newList = [];
              if (_keyWord) {
                this.list.filter(item => {
                  if (
                    item.name.toLowerCase().indexOf(_keyWord) !== -1 ||
                    item.age.toLowerCase().indexOf(_keyWord) !== -1
                  ) {
                    newList.push(item);
                  }
                });
              }
              this.list = newList;
            },
          }
    }