17_Vue列表过滤_js模糊查询 _生活百科

列表过滤需求分析

文章插图

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

上述这个需求，我们可以使用两种方式或者更多的方式实现，我们这里采用计算属性和监视属性来写
前置API的复习filter该API内部需要接受一个参数，这个参数类型是函数类型

文章插图

原生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参考博文
计算属性实现使用计算属性来实现可能要麻烦点，但是我会详细的把步骤写下来
知识回顾

计算属性是vue当中的一个配置项，computed
computed当中，计算属性由两部分组成（key:{} == 属性名，类型为对象）
- computed:{ Calculate:{ }}
书写方式两种，如果不需要对计算属性进行修改，那么可以舍弃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

<!-- 创建一个容器 --><div class="app"><!-- 模糊查询 --><input type="text" v-model="keyWords"><!-- 列表渲染 --><ul><li v-for="item in filterPersons" :key="item.id">{{item.name}} - {{item.age}} - {{item.sex}}</li></ul></div>

<script>const vm = new Vue({el: '.app',data: {name: 'wavesbright',keyWords:"",// 原始数据persons:[{id:1,name:'马冬梅',age:18,sex:"女"},{id:2,name:"周冬雨",age:19,sex:"女"},{id:3,name:"周杰伦",age:20,sex:"男"},{id:4,name:"温兆伦",age:21,sex:"男"},],},methods: {},// 计算属性computed:{// key:{} == 属性名，类型为对象filterPersons(){return this.persons.filter((item) => {return item.name.indexOf(this.keyWords) != -1})}}});</script>

实现效果【17_Vue列表过滤_js模糊查询】注意观察右边数据的变化