uniapp前端实现u-search模糊搜索且不调用后端接口
时间: 2023-12-24 12:05:27 浏览: 159
要实现u-search组件的模糊搜索且不调用后端接口,可以使用uniapp自带的filter过滤器和computed计算属性。
首先,在页面上使用u-search组件,将其绑定到data中的searchText变量上。然后,在需要搜索的列表数据上使用v-for循环渲染,并通过filter过滤器筛选出符合条件的数据。
```html
<template>
<view>
<u-search v-model="searchText" placeholder="搜索"></u-search>
<view v-for="item in filteredList" :key="item.id">{{ item.name }}</view>
</view>
</template>
```
接着,在computed计算属性中定义一个filteredList数组,用来存储符合搜索条件的数据。在该计算属性中,首先通过RegExp构造函数将搜索关键词转换成正则表达式,然后使用Array的filter方法筛选出符合条件的数据并返回。
```javascript
<script>
export default {
data() {
return {
searchText: '',
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
{ id: 4, name: 'pear' },
],
};
},
computed: {
filteredList() {
const reg = new RegExp(this.searchText, 'i');
return this.list.filter(item => reg.test(item.name));
},
},
};
</script>
```
这样就可以实现u-search组件的模糊搜索,而不需要调用后端接口。
阅读全文