用vue实现前端模糊搜索
时间: 2024-03-01 07:49:52 浏览: 19
实现前端模糊搜索可以使用Vue的computed属性和watch属性。以下是一个示例代码:
```html
<template>
<div>
<input v-model="searchText" placeholder="Search...">
<ul>
<li v-for="result in searchResults">{{ result }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
data: ['apple', 'banana', 'cherry', 'durian']
}
},
computed: {
searchResults() {
return this.data.filter(item => item.toLowerCase().includes(this.searchText.toLowerCase()))
}
},
watch: {
searchText(newVal, oldVal) {
console.log(`searchText changed from ${oldVal} to ${newVal}`)
}
}
}
</script>
```
在这个示例中,我们使用了一个输入框和一个包含一些水果名称的数组。我们使用v-model指令将输入框的值绑定到searchText属性上。我们使用computed属性来计算符合搜索条件的结果,并将它们渲染到模板中。我们使用watch监听searchText的变化,并在控制台输出变化的值。
在这个示例中,我们使用了JavaScript的filter方法来过滤数据,使用了toLowerCase方法将输入和数据中的字符串都转换为小写字母,这样可以不区分大小写地进行搜索。