add：vue列表功能举例（按条件筛选item）

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部分：
 
 
 
+