vue 列表过滤

用一个案例大致解释下：

这边要进行一个模糊查询

输入一个冬,则只显示上面俩个 

也就是说,把100条数据根据你的输入只显示出6条这就是一种过滤

要输入一个字时,下面就要发生改变所以就是一个v-model的双向绑定

用watch实现：

 这边使用了

indexOf（）

不包含则返回-1包含则返回对应的索引值

filter过滤方法中,它是不会该变数组的,会新生成出一个数组,而这还没有对新生成的数组进行调用

 

原数据不能更改所以要定义一个filPersons

前面的插值对象也要换成filPersons属性

 

 

 

但是这样还是有问题由于filPersons的初始为空,.所以显示也为空

但是不影响搜索的功能

 当全部删除输入的信息

发现空字符串查找都能进行查找的到

 所以以为默认框为空字符串所以只需要进行对watch属性加上immediate:true

表示,一开始进行一次侦听

代码注释小技巧：加region 和endregion

 

用计算属性：computed实现

用计算属性

当第一次调用时,此时输入框为空,则keyword为空,则输入全部的数据

当输入框输入数据则keyword改变则再次触发计算属性.即计算属性的依赖属性改变则计算属性也进行再次调用,实现了模糊查询