vue实现输入框模糊查询
时间: 2024-01-31 18:02:20 浏览: 36
以下是使用Vue实现输入框模糊查询的代码示例:
```html
<template>
<div>
<input type="text" v-model="searchText" @input="search" placeholder="请输入搜索内容">
<ul>
<li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
dataList: ['apple', 'banana', 'orange', 'pear'],
searchResult: []
}
},
methods: {
search() {
this.searchResult = this.dataList.filter(item => {
return item.indexOf(this.searchText) !== -1
})
}
}
}
</script>
```
在上述代码中,我们首先在模板中定义了一个输入框和一个用于展示搜索结果的列表。然后在Vue实例的data选项中定义了三个变量:searchText表示输入框中的搜索内容,dataList表示原始数据列表,searchResult表示搜索结果列表。
接着,在methods选项中定义了一个名为search的方法,该方法会在输入框内容发生变化时被调用。在search方法中,我们使用了数组的filter方法对原始数据列表进行过滤,只保留包含搜索内容的元素,并将结果赋值给searchResult变量,从而实现了输入框的模糊查询功能。