实现列表过滤可以通过watch(监视)实现也可以通过computed(计算属性)来实现;
首先奉上基本代码
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyword"></input>
<ul>
<li v-for="(item , index) in filterperson" :key="item.id">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
以上为在页面的设计
以上为页面效果。
以下为Vue
------------------------------------------------------------
第一种:computed实现
computed:{
filterperson(){
return this.persons.filter((item)=>{
return item.name.indexOf(this.keyword) !== -1
})
}
},
第二种 watch实现
并且要在data中定义数组 filterperson
watch:{
keyword:{
immediate:true,
handler(val){
this.filterpersons = this.persons.filter((item)=>{
return item.name.indexOf(val) !== -1
})
}
}
}
以上就是这两种方法。