一、基本概念
1、Vue.js是一套用于构建用户界面的渐进式框架。
2、模糊查询指的是根据模糊的关键字进行查询，而不是精确匹配。
3、搜索则是指在给定的数据集中查找符合要求的数据。
二、使用场景
1、搜索引擎
2、电商网站查询商品
3、音乐网站查询歌曲
4、社交网站查询用户
三、实现方法
1、使用computed属性
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
});
}
}
首先，定义一个computed属性，名为filteredList。它会返回一个根据搜索关键字筛选过的列表。其中，我们使用JavaScript的filter()方法来筛选需要的数据。
我们需要根据name属性来进行搜索，所以我们需要访问每个item的name属性。使用toLowerCase()方法可以将字母转换成小写，这样我们就可以不区分大小写地进行比较。
includes()方法用来判断一个字符串是否包含另一个字符串。如果字符串中包含了搜索关键字，就会返回true，否则返回false。
2、使用watch监听器
watch: {
searchTerm(newVal) {
this.filteredList = this.list.filter(item => {
return item.name.toLowerCase().includes(newVal.toLowerCase());
});
}
}
这种方法比较直观，我们定义一个watch属性，用来监听searchTerm关键字的变化。每当搜索关键字发生变化时，就会执行这个watch属性中的函数。
在函数中，我们根据searchTerm筛选需要的数据，然后将这些数据赋值给filteredList属性。这样，我们就实现了一个基于watch的模糊搜索功能。
3、使用v-for和v-if指令
{{ item.name }}
原创文章，作者：FQPLB，如若转载，请注明出处：https://www.506064.com/n/361238.html
微信扫一扫 
支付宝扫一扫 