vue2过滤器模糊查询

1、用到Vue.js的知识点:

v-for循环   v-model绑定   computed计算属性

2、用到的js知识点：

Object.keys()     array.some()     array.filter() 

object.keys(): 获取对象属性值，返回一个数组列表；

var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']
var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]

array.some(function(curentValue,index,arr))；用于检测数组中元素是否存在满足条件，依次执行每个元素。

curentValue:必选项，当前元素的值

index:可选项，当前元素索引

arr:可选项，当前元素属于的数组对象

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log(arr.some( function( item, index, array ){ 
    console.log( 'item=' + item + ',index='+index+',array='+array ); 
    item=1,index=0,array=1,2,3,4,5,6
    item=2,index=1,array=1,2,3,4,5,6
    item=3,index=2,array=1,2,3,4,5,6
    item=4,index=3,array=1,2,3,4,5,6
    item=5,index=4,array=1,2,3,4,5,6
    item=6,index=5,array=1,2,3,4,5,6
})); 

array.filter(); filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

该方法看起来和some()方法差不多，但是array.filter()方法会返回一个新数组，而some()方法只会返回true 和  false;

我们最后会返回新数组用于渲染页面，所以会用filter;

3、vue代码，因为我们测试的是一个小功能，所以就不用vue格式的文件了；

引入vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

样式代码：

<style>
	#app{margin:0 auto;width:800px;height:800px;text-align: center;}
	.searchIcon{width:300px;height:30px;border: 1px solid #ccc;margin-top:50px;padding-left: 10px;}
	.hcy-public-table thead{background: #03b8cc;height: 45px;}
	.hcy-public-table thead tr>th{color: #fff;font-weight: bold;font-size: 13px;padding: 10px 5px;text-align:center;}
	.hcy-public-table tbody tr{height: 50px;background: #fff;}
	.hcy-public-table tbody tr:nth-child(2n){background: #f9f9f9;}
	.hcy-public-table tbody tr:hover{background-color:#fff9df }
	.hcy-public-table tbody tr>td{font-size:14px;color:#666;}
	.hcy-public-table{width:800px;text-align: center;border-collapse: separate;border-spacing: 0;padding-top: 20px;}
</style>

页面代码：

1、页面上我们会在输入框上绑定一个值，来筛选我们要的数据；

2、用v-for来将数据展示到页面上

<div id="app">
	<input type="text" class="searchIcon" v-model="searchText" placeholder="请输入要查询的内容" />
	<table class="hcy-public-table">
		<thead>
			<tr>
				<th v-for="col in columns">
					{{col}}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in searchData">
				<td v-for="col in columns">
					{{item[col]}}
				</td>
			</tr>
		</tbody>
	</table>
</div>

脚本代码：

1、声明一个vue实例出来；

2、我们这里将会用到的数据写在data里面，分别是查询内容、表格标题、表格数据；

3、我们会有一个计算属性来筛选出符合我们输出内容的数据，将新数据渲染到表格中，会用到filter

4、在声明计算属性时就会用到上面说的js 方法，具体看下边代码

<script>

var app=new Vue({
		el:'#app',
		data:{
			searchText:'',
			columns:['name','price','category'],
			products: [
				{
			          name: '苹果',
			          price: 25,
			          category: "水果"
			            },
			            {
			                name: '香蕉',
			                price: 15,
			                category: "水果"
			            },
			            {
			                name: '雪梨',
			                price: 65,
			                category: "水果"
			            },
			            {
			                name: '宝马',
			                price: 2500,
			                category: "汽车"
			            },
			            {
			                name: '奔驰',
			                price: 10025,
			                category: "汽车"
			            },
			            {
			                name: '柑橘',
			                price: 15,
			                category: "水果"
			            },
			            {
			                name: '奥迪',
			                price: 25,
			                category: "汽车"
			            },
			            {
			                name: '火龙果',
			                price: 25,
			                category: "工具"
			            }
		            ]
				},
				computed:{
					searchData:function(){
						var searchText=this.searchText;
						if(searchText){
							return this.products.filter(function(product){
								return Object.keys(product).some(function(key){
									return String(product[key]).toLowerCase().indexOf(searchText) > -1
								})
							})
						}
						return this.products
					}
				}
			})

</script>