vue 纯前端搜索功能实现
时间: 2023-09-29 22:11:20 浏览: 46
Vue 纯前端搜索功能可以通过过滤数组来实现。以下是一个简单的实现示例:
1. 在 Vue 实例中定义一个数组,作为搜索的数据源。
```
data() {
return {
items: [
{ name: 'apple', price: 1.99 },
{ name: 'banana', price: 0.99 },
{ name: 'orange', price: 1.49 },
{ name: 'watermelon', price: 2.99 }
],
searchTerm: ''
}
}
```
2. 在 template 中添加一个搜索框和一个列表展示搜索结果。
```
<template>
<div>
<input type="text" v-model="searchTerm" placeholder="Search...">
<ul>
<li v-for="item in filteredItems">{{ item.name }} - {{ item.price }}</li>
</ul>
</div>
</template>
```
3. 在 computed 中添加一个过滤函数,根据搜索词过滤数组。
```
computed: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.searchTerm.toLowerCase()))
}
}
```
这样,当用户输入搜索词后,列表会自动展示包含该搜索词的项。
完整代码如下:
```
<template>
<div>
<input type="text" v-model="searchTerm" placeholder="Search...">
<ul>
<li v-for="item in filteredItems">{{ item.name }} - {{ item.price }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'apple', price: 1.99 },
{ name: 'banana', price: 0.99 },
{ name: 'orange', price: 1.49 },
{ name: 'watermelon', price: 2.99 }
],
searchTerm: ''
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.searchTerm.toLowerCase()))
}
}
}
</script>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)