// 搜索框
<input type="text" v-model="keyWord" >
<ul>
<li v-for="item in filperson" :key="item.id">
{{item.name + '--' + item.age}}
</li>
</ul>
// 数据列表
person: [
{
id: 1,
name: "张三",
age: 18,
},
{
id: 2,
name: "老王",
age: 18,
},
{
id: 3,
name: "盖伦",
age: 18,
},
],
filperson:[],
keyWord:''
// 使用侦听方法
watch:{
keyWord:{
immediate:true, // 直接执行一次 不用等数据变化
handler(val){
this.filperson = this.person.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
},
// 使用computed
computed:{
filerperson(){
return this.filperson = this.person.filter((v)=>{
return v.name.indexOf(this.keyWord) !== -1
})
}
},
// 完整代码
<template>
<div>
<input type="text" v-model="keyWord">
<ul>
<li v-for="item in filerperson" :key="item.id">
{{item.name + '--' + item.age}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
person: [{
id: 1,
name: "张三",
age: 18,
},
{
id: 2,
name: "老王",
age: 18,
},
{
id: 3,
name: "盖伦",
age: 18,
},
],
filperson: [],
keyWord: '',
};
},
computed: {
filerperson() {
return this.filperson = this.person.filter((v) => {
return v.name.indexOf(this.keyWord) !== -1
})
}
},
// 使用侦听方法
}
</script>
