vue实现本地搜索(学习篇)

1、初始化查询的数据

	//查询数据
	getSelectDataList(){
		//假设这是接口请求到的数据
		let resData = [
			{
				name:"test001",
				age:18
			},
			{
				name:"test002",
				age:19
			},
			{
				name:"test003",
				age:20
			},
		]
		//将数据保存到本地存储中
		 localStorage.setItem('array', JSON.stringify(resData ));
	}

2、搜索按钮

    // 搜索
    handelSearch() {
      // 使用本地存储保存从接口拿到的数据，未遍历的数据，防止搜索后，再次搜索查不到数据问题
      let mapArray = JSON.parse(localStorage.getItem('array'));
      // 判断输入框是否有值
      if (this.inputName) {//这个值为输入框输入的值
        var brr = mapArray.filter(value => {
          //遍历数组，返回值为true保留并复制到新数组，false则过滤掉
          return value.name.includes(this.inputName.trim());
        });
        this.protalList = brr;
      } else {// 如果输入框没值,直接赋值本地存储的数据
        this.protalList = mapArray;
      }
    },