vue v-model代码实现模糊搜索
时间: 2023-09-04 07:16:41 浏览: 45
可以通过监听输入框的输入事件,配合使用计算属性和过滤器来实现模糊搜索。
HTML代码:
```html
<input type="text" v-model="searchText">
<ul>
<li v-for="item in filteredList">{{ item }}</li>
</ul>
```
Vue代码:
```javascript
data() {
return {
list: ['apple', 'banana', 'cherry', 'durian', 'elderberry'],
searchText: ''
}
},
computed: {
filteredList() {
return this.list.filter(item => {
return item.toLowerCase().includes(this.searchText.toLowerCase())
})
}
}
```
上面的代码中,我们定义了一个list数组和一个searchText变量,其中list数组保存了需要进行搜索的数据,searchText保存了用户输入的搜索关键字。在computed属性中,我们定义了一个filteredList计算属性,它会根据用户输入的搜索关键字来过滤list数组中的数据,得到一个新的数组。这里使用了JavaScript的filter()方法和includes()方法,它们可以很方便地实现数组的过滤和字符串的匹配。
最后,在HTML代码中,我们通过v-for指令将过滤后的数据渲染到页面上,使用了一个简单的ul和li结构来展示数据。这样,当用户输入搜索关键字时,页面上展示的数据就会根据搜索结果实时更新。