图示:
html:
<template>
<div>
<!-- 模糊搜索输入框 -->
<input type="text" v-model="searchTerm" placeholder="请输入搜索关键词" />
<!-- 显示搜索结果 -->
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
js:
<script>
export default {
name: "FollowRecord",
data() {
return {
searchTerm: "", // 搜索关键词
items: [
// 模拟的数据
{ id: 1, name: "苹果" },
{ id: 2, name: "香蕉" },
{ id: 3, name: "橙子" },
{ id: 4, name: "西瓜" },
{ id: 5, name: "葡萄" },
{ id: 6, name: "苹果2" },
{ id: 7, name: "苹3" },
],
};
},
computed: {
// 根据搜索关键词过滤数据
filteredItems() {
return this.items.filter((item) => {
return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
});
},
},
};
</script>
在 computed
计算属性中,定义了 filteredItems
计算属性,它根据 searchTerm
进行搜索关键词过滤,返回符合条件的数据项。这样,在用户输入关键词时,计算属性会自动重新计算并更新搜索结果列表,实现了模糊搜索的功能。
整个表达式的作用是将项目名称转换为小写字母,并检查是否包含搜索关键词(也转换为小写字母)。如果包含搜索关键词,则表达式返回 true
;否则返回 false
。这个表达式通常用于筛选数据,以便在模糊搜索中确定哪些项目应该包含在结果中。
this.searchTerm
是空的,那么 this.searchTerm.toLowerCase()
将返回一个空字符串,因为调用 toLowerCase()
方法不会引发错误,它只是将空字符串转换为小写字符串。然后,item.name.toLowerCase().includes('')
将始终返回 true
,因为空字符串被认为是任何字符串的子字符串。因此,即使搜索关键词为空,它仍然会匹配所有项目名称,结果是所有项目都会被包含在过滤结果中。