vue3 模糊搜索
在项目中,搜索功能是经常需要使用的一个场景,最常用的是在列表数据中搜索一个想要的,并展示。搜索逻辑是只要用户输入值与产品的名称进行模糊匹配,符合条件的数据进行展示,不符合条件的数据过滤。...
·
在项目中,搜索功能是经常需要使用的一个场景,最常用的是在列表数据中搜索一个想要的,并展示。搜索逻辑是只要用户输入值与产品的名称进行模糊匹配,符合条件的数据进行展示,不符合条件的数据过滤。步骤如下:
- 用户点击搜索框,输入内容;
- 点击搜索按钮,取用户输入值;
- 对用户输入值进行判断,若为空,则展示原列表,不为空则进行筛选;
- 将用户输入值与所有列表数据进行遍历匹配,若匹配,则展示匹配条目,完成搜索。
<input placeholder="搜索姓名" v-model="inputValue" >
<n-button type="primary" @click="searchig"> 搜索 </n-button>
setup中声明
const inputValue = ref('');
//搜索
const searchig = () => {
data.arr = [];
for (let i = 0; i < 自己数据列表.length; i++) {
if (自己数据列表[i].name.indexOf(inputValue.value) != -1) {
data.arr.push(自己数据列表[i]);
}
}
列表数据源 = data.arr;//重新赋值
};
更多推荐
已为社区贡献2条内容
所有评论(0)