17_Vue列表过滤_js模糊查询

列表过滤

需求分析

17_Vue列表过滤_js模糊查询插图

  1. 这里呢有张列表,假设这个列表有一百多条数据
  2. 当我在这个 搜索框当中 搜索 单个关键字的时候 (冬,周,伦),它能把带了这几个关键字的信息都给我罗列出来 === 跟数据库的 模糊查询类似
  3. 这个需求很常见,请你实现一下

上述这个需求,我们可以使用两种方式或者更多的方式实现,我们这里采用计算属性和监视属性来写

前置API的复习

filter

该API内部需要接受一个参数,这个参数类型是函数类型

17_Vue列表过滤_js模糊查询插图1

  • 原生js提供的一个过滤数据的API
  • 参考链接
  • 写个用法吧

    • const array = [14, 17, 18, 32, 33, 16, 40];
      let newArr = array.filter(function(item){
          // item 就是该数组当中的每一项
          // 该API需要提供一个返回值,这个返回值是一个判定条件
          return item > 14
      })
      // 最终结果 newArr = [17,18,32,33,16,40] 将14过滤掉了
      
  • filter并不会改变原有数组的结构会返回一个新的数组

indexOf

参考博文

计算属性实现

使用计算属性来实现可能要麻烦点,但是我会详细的把步骤写下来

知识回顾

  1. 计算属性是vue当中的一个配置项,computed
  2. computed当中,计算属性由两部分组成(key:{} == 属性名,类型为对象

    • computed:{
          Calculate:{
      
          }
      }
      
  3. 书写方式两种,如果不需要对计算属性进行修改,那么可以舍弃set配置项的编写,从而将计算属性写为函数形式,函数内部的内容代表的就是get配置项的内容

    1. get配置项

      • 该计算属性被访问的时候调用,所依赖的数据被修改的时候,也会更新
    2. set配置项

      • 当计算属性整体被修改的时候调用,因为计算属性依赖于其他属性,所以修改的时候要修改计算属性所依赖的属性
    3. computed:{
          Calculate:{
              get(){
      
              },
              set(){
      
              }
          }
      }
      

综上所述,这个功能要被实现,那么计算属性必须要出现在页面当中,并且该计算属性还需要绑定一个或者多个 依赖属性

当所依赖的属性发生修改的时候,计算属性的get调用,而我们的模糊查询,就在get当中实现

在get当中实现,那么就可以使用计算属性的简写形式

业务实现

  • 首先我们需要一个input框,在input框中,设置一个v-model双向绑定(与data当中的数据绑定)
  • filePersons所依赖的数据就是 keyWords
  • keyWords需要参与运算
  • 那剩下的结构就很简单了,ul与li标签渲染数据

html


    
  • {{item.name}} - {{item.age}} - {{item.sex}}

js


实现效果

注意观察 右边数据的变化

17_Vue列表过滤_js模糊查询插图2

关于空串

  • 为什么,input框中没有内容的时候,反而数据全部回来了呢?
  • 因为这个时候,input虽然没有内容,但是它的value值是一个空字符串
  • 空字符串包含在所有字符串当中
  • 判定条件自然为true

监视属性实现

watch知识点复习

  1. 是vue的一个配置项
  2. 内部采用 键值对来配置属性

    • watch:{
          keyWords:{
              // 配置项1
              // 配置项2
              // 配置项3
          }
      }
      
  3. 内部有很多配置项,以handler这个配置项为主

    • handler是一个函数类型
    • 当数据发生改变的时候调用该配置项
    • watch:{
          keyWords:{
              // 配置项1
              // 配置项2
              // 配置项3
              handler(newValue,oldValue){
                  // 新数据,原始数据
              }
          }
      }
      
  4. watch的写法有两种

    1. 一种是在vue当中书写
    2. 一种是在外部使用vue的 $watch书写(你明确知道你要监视的属性是谁
  5. 我们等下使用$watch书写

准备工作

html

与之前计算属性一样,但是这次不需要额外的span标签了,因为我们只对keyWords进行监视


    
  • {{item.name}} - {{item.age}} - {{item.sex}}

js

// 我很明确我要监视的属性是keyWords
    vm.$watch("keyWords",function(newValue){
        // 内部书写的就是handler函数的内容
        this.initialArr = this.persons.filter((item) => {
            return item.name.indexOf(this.keyWords) != -1
        })
    })

测试

17_Vue列表过滤_js模糊查询插图3

事件分析,属性解读

  1. 为什么我这里写了两个数组,因为使用了filter进行过滤,而filter会返回一个新数组
    • 如果data当中只存在一个数组,原始数组,那么当 filter进行过滤的时候,为了同步,我们只能让原始数组的值替换为新的filter过滤数据
    • 总之,需要一个原始数据和渲染数据,原始数据无法修改,渲染数据可以修改(迎合filter)
  2. 对persons进行过滤,item为persons数组当中的每一个对象
    • filter的参数是一个函数类型
    • 该函数需要返回值,返回值是一个判定条件
    • 判定条件我们使用indexOf 的字符匹配,只要匹配成功,那么indeOf调用的返回值就不是-1

filter API自实现

我感觉这个API我用起来不是很顺畅

我自己写一个看看

分析

这是api参考手册

17_Vue列表过滤_js模糊查询插图4

17_Vue列表过滤_js模糊查询插图5

这是我们刚刚实例当中使用的filter

17_Vue列表过滤_js模糊查询插图6

设计思路

  1. 抛开其他的不谈,filter 本质上就是 原型Array上的一个函数 == api
  2. 这个api的结构是这样的

    • // 这个percolator是一个匿名函数
      function filter(percolator){
      
      }
      
  3. 那么重点就在这个percolator 身上,它是一个参数,是一个匿名函数
  4. 这个匿名函数有三个参数,对应的就是文档上的三个参数

    1. currentValue:这是数组当中的每一项

      • 这个项是怎么来的 ==> 通过循环得到的
    2. index:这是currentValue这个元素,它在数组当中的索引
    3. arr:currentValue所处的数组
  5. 把这个搞清楚了,剩下的就很简单了

开始设计

  1. 首先我们需要在原型对象Array当中,通过prototype 设计一个供 所有数组类型,调用的函数

    • Array.prototype.myFilter = function(percolator){}
      
  2. 既然这个 方法,最终会得到一个新的数组,不会改变原有数组结构,那我们肯定要先设计一个新数组嘛

    • Array.prototype.myFilter = function(percolator){
          // 设计一个新数组
          let newArr = [];
      }
      
  3. 我们需要得到 currentValue(循环项),这个东西到底如何上手?通过循环得到嘛

    1. 通过刚刚在原形对象上设计的 myFilter 函数,我们可以对这个数组进行基本的迭代
    2. Array.prototype.myFilter = function(percolator){
          // 设计一个新数组
          let newArr = [];
          // 对当前数组进行迭代;this的指向是数组本身
          for(let i =0; i
    3. this[i] 就代表我们当前的循环项,也就是currentValue
  4. 那么现在,值得思考的地方就来了

    1. 我们使用这个for循环,是为了得到循环项,那么这个循环项给谁调用? == 匿名函数percolator
    2. 这个匿名函数,可以接受三个参数,但是currentValue是必须要的,所以这里我们三个参数都传进去
    3. 那么,匿名函数应该用在什么位置?
      • 我觉得这里应该写个判断,当满足条件的时候,给newArr添加一个元素
    4. 它需要做什么事情?

      • 这个判断,就是匿名函数要做的事情,但是判断不能写死,要让使用者来书写

完整实现

所以现在结果很明确,我们需要写个if判断,当if为true,执行if当中的语句,控制是否为true,交给匿名函数 == percolator 来搞定

  • Array.prototype.myFilter = function(percolator){
        // 设计一个新数组
        let newArr = [];
        // 对当前数组进行迭代;this的指向是数组本身
        for(let i =0; i

测试

这里有一个简单结构的数组

17_Vue列表过滤_js模糊查询插图7

现在我们调用api,myFilter,打印输出

17_Vue列表过滤_js模糊查询插图8

17_Vue列表过滤_js模糊查询插图9

文章来源于互联网:17_Vue列表过滤_js模糊查询

THE END
分享
二维码