品牌案例-根据关键字实现数组的过滤
内容简介：
一、 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>
