<template>
<div>
<input v-model="keyword" placeholder="请输入关键字">
<ul>
<li v-for="item in filteredList">{{ item.name }} - {{ item.age }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
list: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
]
}
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.indexOf(this.keyword) !== -1 || item.age.toString().indexOf(this.keyword) !== -1
})
}
},
watch: {
keyword(val) {
console.log(val)
}
}
}
</script>