diff --git a/21-Vue基础/01-04.Vue的举例:列表功能.md b/21-Vue基础/01-04.Vue的举例:列表功能.md index df5bbfc..ece4354 100644 --- a/21-Vue基础/01-04.Vue的举例:列表功能.md +++ b/21-Vue基础/01-04.Vue的举例:列表功能.md @@ -399,6 +399,62 @@ js部分: ### 步骤 5:按条件筛选item +现在要求实现的效果是,在搜索框输入关键字 keywords,列表中仅显示匹配出来的内容。也就是说: + +- 之前, v-for 中的数据,都是直接从 data 上的list中直接渲染过来的。 + +- 现在, 我们在使用`v-for`进行遍历显示的时候,不能再遍历全部的 list 了;我们要自定义一个 search 方法,同时,把keywords作为参数,传递给 search 方法。即`v-for="item in search(keywords)"`。 + + +在 search(keywords) 方法中,为了获取匹配的item,我们可以有两种方式实现。如下。 + +**方式一:** + +```javascript + search(keywords) { // 根据关键字,进行数据的搜索,返回匹配的item + + //实现方式一:通过 indexOf() 进行匹配。 + var newList = []; + this.list.forEach(item => { + if (item.name.indexOf(keywords) != -1) { + newList.push(item) + } + }) + return newList + } +``` + +上方代码中, 我们要注意 indexOf(str) 的用法。举例如下: + +```javascript + var str = 'smyhvae'; + + console.log(str.indexOf('s')); //打印结果:0 + + console.log(str.indexOf('')); //打印结果:0。(说明,即使去匹配空字符串,也是返回0) + + console.log(str.indexOf('h')); //打印结果:3 + + console.log(str.indexOf('x')); //打印结果:-1 (说明,匹配不到任何字符串) +``` + + + + + + + + + + + +### 步骤6 + + + + + + 在 Vue 1.0版本中,可以通过`filterBy`这个api进行过滤。 如果item是简单数据类型,可以这样筛选: @@ -427,3 +483,4 @@ js部分: +