vue实现前端模糊搜索
时间: 2023-07-29 08:13:14 浏览: 64
Vue可以通过自定义指令和计算属性实现前端模糊搜索。下面是一个示例代码:
首先,你需要在你的Vue实例中定义一个data属性来存储搜索关键字和原始数据列表:
```javascript
data() {
return {
keyword: '',
dataList: ['apple', 'banana', 'cherry', 'grape', 'orange']
}
}
```
然后,你可以在HTML模板中使用`v-model`指令来绑定搜索关键字:
```html
<input type="text" v-model="keyword" placeholder="请输入关键字">
```
接下来,你可以通过计算属性来实现模糊搜索的逻辑。在计算属性中,你可以使用`filter()`方法和正则表达式来筛选匹配的数据项:
```javascript
computed: {
filteredData() {
return this.dataList.filter(item => {
return item.toLowerCase().includes(this.keyword.toLowerCase());
});
}
}
```
最后,你可以在模板中使用`v-for`指令来渲染筛选后的数据列表:
```html
<ul>
<li v-for="item in filteredData" :key="item">{{ item }}</li>
</ul>
```
现在,当你在输入框中输入关键字时,Vue会根据关键字筛选出匹配的数据,并渲染在页面上。
希望这个示例能帮到你!