,可以通过自定义组件和计算属性来实现。
首先,创建一个名为SearchInput的自定义组件,用于接收搜索关键字并触发搜索操作。在组件中,使用v-model绑定一个名为searchText的prop,用于接收父组件传递的搜索关键字,并通过input事件将搜索关键字传递给父组件。
<template>
<input type="text" v-model="searchText" @input="handleInput" placeholder="Search...">
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
searchText: this.value
};
},
methods: {
handleInput() {
this.$emit('input', this.searchText);
}
}
};
</script>
接下来,在父组件中使用SearchInput组件,并通过v-model绑定一个名为searchText的data属性,用于接收和更新搜索关键字。同时,使用计算属性来过滤数组中的数据,根据搜索关键字进行筛选。
<template>
<div>
<search-input v-model="searchText"></search-input>
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import SearchInput from './SearchInput.vue';
export default {
components: {
SearchInput
},
data() {
return {
searchText: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.searchText.toLowerCase()));
}
}
};
</script>
在上述代码中,SearchInput组件通过v-model绑定了searchText属性,当输入框的值发生变化时,会自动更新searchText的值。父组件中的计算属性filteredItems根据searchText的值对items数组进行筛选,返回符合条件的数据。
这样,当在SearchInput组件中输入搜索关键字时,父组件中的列表会根据搜索关键字进行实时过滤显示。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云