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

文章插图
关于空串

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

监视属性实现watch知识点复习

是vue的一个配置项
内部采用键值对来配置属性
- watch:{ keyWords:{// 配置项1// 配置项2// 配置项3 }}
内部有很多配置项，以handler这个配置项为主
- handler是一个函数类型
- 当数据发生改变的时候调用该配置项
- watch:{ keyWords:{// 配置项1// 配置项2// 配置项3handler(newValue,oldValue){// 新数据，原始数据}}}
watch的写法有两种
1. 一种是在vue当中书写
2. 一种是在外部使用vue的 $watch书写（你明确知道你要监视的属性是谁）
我们等下使用$watch书写

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

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

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

测试

文章插图
事件分析，属性解读

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

filter API自实现我感觉这个API我用起来不是很顺畅
我自己写一个看看
分析这是api参考手册