vue 输入框关键字筛选检索列表数据展示

最新推荐文章于 2023-12-01 13:23:16 发布

唯曼影离殇

最新推荐文章于 2023-12-01 13:23:16 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wdj861911434/article/details/114882250

版权

vue的input输入框输入关键字检索数据列表的代码
html：
在这里插入图片描述

匹配（所有||单个）字段 > js：

在这里插入图片描述

computed: {
    //过滤方法
    items: function() {
        var _search = this.search;
        if (_search) {
            //不区分大小写处理
            var reg = new RegExp(_search, 'ig')
            //es6 filter过滤匹配，有则返回当前，无则返回所有
            return this.list.filter(function(e) {
                //匹配所有字段
                return Object.keys(e).some(function(key) {
                    return e[key].match(reg);
                })
                //匹配某个字段
                //  return e.name.match(reg);
            })
        };
        return this.list;
    }
},

}

说明：this.list是你要进行关键字筛选的数据，不需要遍历this.list，computed中的items是你要遍历的数据，