在做检索时,很容易遇到数据自动匹配、检索的功能,就是过滤器。通俗来讲就是:用户输入内容与数组元素的匹配,而不改变原数组内容,输入框检索功能。如下图:
直接给大家两个案例,元数据一个是数组,一个是对象的情况。
假设匹配的是TItle字段。
数组:
<template>
<div>
<input v-model="searchInput" type="text" placeholder="输入内容" />
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchInput: '',
items: [
{ id: 1, title: '标题1' },
{ id: 2, title: '标题2' },
{ id: 3, title: '标题3' },
{ id: 4, title: '标题4' },
],
};
},
computed: {
filteredItems() {
if (this.searchInput) {
// 使用输入内容与标题进行匹配
return this.items.filter(item =>
item.title.toLowerCase().includes(this.searchInput.toLowerCase())
);
} else {
return this.items;
}
},
},
};
</script>
另一个是对象的情况。也就是上面items
是一个对象,并且在过滤时需要将其转换为数组进行匹配,可以使用Object.values()
方法将对象的值转换为数组,然后再进行过滤。下面是修改后的示例代码:
<template>
<div>
<input v-model="searchInput" type="text" placeholder="输入内容" />
<ul>
<li v-for="item in filteredItems" :key="item.key">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchInput: '',
items: {
1: { key: 1, title: '标题1' },
2: { key: 2, title: '标题2' },
3: { key: 3, title: '标题3' },
4: { key: 4, title: '标题4' },
},
};
},
computed: {
filteredItems() {
if (this.searchInput) {
const itemsArray = Object.values(this.items); // 将对象转换为数组
return itemsArray.filter(item =>
item.title.toLowerCase().includes(this.searchInput.toLowerCase())
);
} else {
return Object.values(this.items); // 如果没有输入内容,返回所有的对象数组
}
},
},
};
</script>