vue的列表过滤

其实是讲在写列表过滤的时候发现的一些问题，自己才发现自己基础差很多

常用于列表过滤的filter函数的用法和indexOf

先来讲一下filter吧

<div id="root">
			<h2>人员列表</h2>
			<!-- //v-model双向绑定，简写是value -->
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) in persons" :key=persons.id>
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

这是html的代码块

new Vue({
				el:'#root',
				data:{
                    keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'},
					]
                },
                watch:{
                   keyWord(val){
					//filter是过滤器，有多少个数组会循环多少次数，每次循环都将当前循环次数赋值给函数中的a，原理相当于persons[a]
                    //如果查询到当前数组的判断返回值是true，则将该数组拿出来，放进新的数组里
                    //原理
                    this.persons = this.persons.filter((a)=>{
                        //原理，查询persons[0].name
                        return a.name.indexOf(this.keyWord) !== -1
                    })
					//indexOf根据输入内容查找，有则返回0，没有则返回-1
					//要过滤的值
                   }
                },
            })

这是vue的代码块，其实因为自己看不明白已经加了很多注释了

filter是过滤器，比如代码中我们给persons数组加了filter属性（persons.filter），filter必须使用函数操作，代码运行时，就会开始对persons遍历，然后内部代码进行判断，filter只能接受内部判断出来的布尔值，如true。

那，函数中的形参a是什么值呢？

已知persons有4个数组，所以filter会遍历4次，每次遍历，filter都会将当前遍历的该数组赋值给a这个形参。

比如代码中filter第一次遍历的是{id:'001',name:'马冬梅',age:19,sex:'女'}，filter会在内部做这个操作

a = {
     id:'001',
     name:'马冬梅',
     age:19,
     sex:'女'
     }

循环完第一次之后，重新把第二次循环的值赋值给a,以此类推。

上面html里的p也是这个原理

<li v-for="(p,index) in persons" :key=persons.id>
	{{p.name}}-{{p.age}}-{{p.sex}}
</li>
//这里的p同样的原理，循环一次p就被重新赋下一个 

然后html里的for会重新循环一次，获取最新的值