开发者学堂课程【Vue.js 入门与实战：品牌案例-根据关键字实现数组的过滤】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8145
品牌案例-根据关键字实现数组的过滤
内容简介：
一、 search 方法获取数据
二、 forEach+indexOf 方法过滤数据
三、 filter+includes 方法过滤数据
一、 search 方法获取数据
在搜索名称关键字输入内容，data 跟着其改变，表格中的数据也要随着进行相关的筛选。
页面中的业务表是通过代码中的 Vue 指令(v-for)循环限制出来的，当在搜索名称关键字文本框中输入内容，就会重新渲染出来一个表格，所以应该获取到最新的数据，就不能写死 list，如果写死list，永远拿到的都是 data 里面的 list，这样是不行的。
使用 list 只能获取 data 里面的值，不能获取到新的值，所以应该让渲染出来表格的数据跟着搜索框变化，使用 search 方法传入 keywords,就能获取到 data 中的任何数据。
之前，v-for 中的数据都是从 data 上的 list 中直接渲染过来的；现在，我们自定义了一个 search 方法，同时，把搜索的关键字，通过传参的形式，传递给了 search方法。
在 search 方法内部，通过执行 for 循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回。
当它返回后，再进行 v-for 循环，就是符合条件的数据。那么就定义一个search(keywords) 方法，根据关键字进行数据的搜索，再循环 list 获取数据。
二、forEach+indexOf 方法过滤数据
forEach 结合 indexOf 查找所需要的条件;先循环 list，然后 item(循环的每一项)，用 item 中的 name 与 keywords 进行比较，看 item.name 是否包含 keywords，如果包含，
就应该把 item 重新存起来，在外面定义一个 newList 空数组，用if语句判断是否包含关键字，用 indexOf 把 keywords传进来，再用！=-1来判断是否包含，
接着 push 一下 item，经过完整的 forEach 循环最后返回 newList,实现数据过滤功能。
空字符串也包含在其中。
var newList = []
this.list.forEach(item=>){
if(item.name.indexOf(keywords)) !=-1){
newList.push(item)
}
})
return newList
三、filter+includes 方法过滤数据
1.filter 方法
this.list.filter(item=>{})，item代表用filter循环的每一项。
注意：forEach,some,filter,findIndes这些都属于数组的新方法，都会对数组中的每一项，进行遍历，执行相关操作。
在操作或循环中有区别，forEach不能被终止；some可以通过return true进行终止；filter用来进行过滤，把查询到的，符合条件的，返回得到一个新数组；findIndex用来找到对象的索引。如果item.name还是包含keywords就进行return，返回一个新数组。ES6中，
为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')。
如果包含，则返回true,否则返回false,最后直接return。
return this.list.filter(item=>{
if(item.name.include(keywords)){
return item
}
})
2.jQuery 中的 contains 方法
(1)定义和用法：
①：contains选择器选取包含指定字符串的元素。
②该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
举例讲解：
<p>123哈哈哈<p>
<p>娃哈哈<p>
<p>345<p>
想要选取出带哈的p标签，就可以使用$( ":contains(哈)")，把所有内容里面包含哈的标签筛选出来，返回一个数组。
③经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素。
(2)语法：
$( ":contains(text)")
完整代码，如下：
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<meta name="viewport" content="width=device-width,initi
al-scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel= "stylesheet" href= "./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id= "app">
<div class= "panel panel-primary">
<div class= "panel-heading">
<h3 class= "panel-title">添加品牌</h3>
</div><div class= "panel-body form-inline " >
<lable>
Id:
<input type= "text" class="form-control" v-model= "id">
</lable>
<lable>
Name:
<input type= "text" class="form-control" v-model= "name">
</lable>
<input type="button" value="添加" class="btn btn
-primary" @click= "add()">
</div>
</div>
<table class= "table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" : key="item.id">
<td>{{ item.id }}</td>
<td>{{ v-text=" item.name " }}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="@click.prevent ="del(item.id)"">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: ' ',
name: ' ',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
]
},
methods: {
add(){
var car ={id: this.id, name:this.name, ctime:new Date()}
this.list.push(car)
}，
del(id){
var index=this.list.findIndex(item=>){
if (item.id == id) {
return true;
}
})
this.list.splice(index, 1)
}，
search(keywords){
return this.list.filter(item=>{
if(item.name.include(keywords)){
return item
}
})
</script>
</body>
</html>
