Vue || Uniapp 模糊查询

思路 ：先请求接口，渲染到data里 ，给input输入框绑定v-model

            根据计算属性监听使用filter()方法和includes()进行过滤筛选。

    


    
        {{ item.memo }}
        {{ item.name }}
    


export default {
    data() {
            return {
                // 模糊查询
                keyword: '',//输入框value
                items:[],
            };
        },
        // 计算属性监听filteredItems
        computed: {
            filteredItems() {
                if (this.keyword) {
                    return this.items.filter(item => item.name.includes(this.keyword)||
                    item.memo.includes(this.keyword)||
                    item.num.toString().includes(this.keyword)
                    )
                } else {
                    return this.items;
                }
            }
        },
          methods:{
            handleInput(event) {
                console.log(event);
                this.keyword = event.target.value;
                console.log(this.items);
            },
        }
}

以上是源代码部分 创作不易，觉得有用就点个大拇指+关注吧！       赠人玫瑰，手留余香~   

顺便再帮你理一下filter()方法includes()方法

filter() 
filter()方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。
1、filter() 不会对空数组进行检测；
2、filter() 不会改变原始数组。
实例：
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]
// 查找某个值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]
//返回大于某个值和小于某个值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]


includes()
作用:
判断数组是否包含指定的值
判断字符串是否包含指定的子串
包含返回true,不包含返回false , 数组或者字符串都能够使用。
includes(a,b) 括号里第一个参数a为必选参数，表示要查找的某个参数；
第二位b为可选参数，表示从某个索引位置开始查找，默认为零，
若传的参数为负数，则用该数组的长度加上其值：arr.length+(-b)。
const arr = [1, 2, 3]
    console.log(arr.includes(2, 3)) // false
    console.log(arr.includes(2, 100)) // false
 -----------------------华丽的分割线--------------------------------------
const str = 'do not worry be happy'
    console.log(str.includes('do')) // true
    console.log(str.includes('don'))  // false

最后        ..............  栓Q  ..............