filter: 过滤器
indexOf():是否包含某某值
<body>
<div id="root">
<!--遍历数组-->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) in persons":key="index">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:'28',sex:'女'},
{id:'002',name:'周冬雨',age:'32',sex:'女'},
{id:'003',name:'周杰伦',age:'42',sex:'男'},
{id:'004',name:'温兆伦',age:'49',sex:'男'},
],
},
watch:{
keyWord(val){
this.persons = this.persons.filter((p)=>{
return p.name.indexOf(val)!==-1
})
}
}
})
</script>
</body>
效果:存在问题,返回值时候,一遍遍赋值,值越来越少,最后检索不到。
监听属性改良之后:
新添加了个接受过滤之后展示用的数组filPersons
修改了v-info中的filPersons
修改了监视器:完整的写了监视器,并且加了immediate: true,作用初始化调用一遍监视器,实现自动调用空字符串查询,将结果全部展现出来
<body>
<div id="root">
<!--遍历数组-->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) in filPersons":key="index">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:'28',sex:'女'},
{id:'002',name:'周冬雨',age:'32',sex:'女'},
{id:'003',name:'周杰伦',age:'42',sex:'男'},
{id:'004',name:'温兆伦',age:'49',sex:'男'},
],
filPersons:[]
},
watch:{
keyWord:{
immediate:true, //初始化时让handler调用一下
//handler什么时候被调用?当isHost发生改变时候
handler(val){
this.filPersons = this.persons.filter((p)=>{
return p.name.indexOf(val)!==-1
})
}
}
}
})
</script>
效果:
使用计算属性实现该功能:
优点:
1、这个回调函数两个时候调用,第一个:一开始时候就帮我们调用。第二个时候:计算的时候所依赖的数据发生变化
2、keyWord怎么变不需要去监视,keyWord参与filPersons计算就可以了,只要keyWord发生变化,整个filPerson重新执行
<body>
<div id="root">
<!--遍历数组-->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) in filPersons":key="index">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:'28',sex:'女'},
{id:'002',name:'周冬雨',age:'32',sex:'女'},
{id:'003',name:'周杰伦',age:'42',sex:'男'},
{id:'004',name:'温兆伦',age:'49',sex:'男'},
],
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1
})
}
}
})
</script>
</body>