vue实现搜索功能的代码/实现搜索的程序

最新推荐文章于 2024-09-11 14:05:32 发布

LBY_XK

最新推荐文章于 2024-09-11 14:05:32 发布

阅读量1k

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/LBY_XK/article/details/118462297

版权

搜索

products：搜索查找的数据集合（数组数组中的对象元素）
search：是input标签输入的要搜索的内容

data() {
    return {
      search: "",
      searchData: "",
      products: [
        ...this.record
        //假数据
        // { num:1, name: "数据1", date: "2018-01-04", scount:23,type:'商品'},
        // { num:1, name: "数据2", date: "2018-01-25", scount:23,type:'商品'},
        // { num:1, name: "数据3", date: "2018-02-10", scount:23,type:'商品'},
        // { num:1, name: "数据4", date: "2018-03-04", scount:23,type:'商品'},
        // { num:1, name: "数据5", date: "2018-05-24", scount:23,type:'商品'},
        // { num:1, name: "数据6", date: "2018-10-29", scount:23,type:'商品'},
      ],
    }
  },

btn: function () {
      var search = this.search;
      if (search) {
        this.searchData = this.products.filter(function (product) {
          //
          return Object.keys(product).some(function (key) {
            //查找满足条件的项
            return String(product[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      this.$emit('searchdata',this.searchData)
    },
  },