使用vue写一个数组过滤方法
时间: 2024-01-27 11:05:25 浏览: 118
一个vue的选择组件可支持用户输入过滤选项
可以使用Vue的计算属性来实现数组过滤,实现方法如下:
```html
<template>
<div>
<input type="text" v-model="searchText" placeholder="请输入搜索关键字">
<ul>
<li v-for="item in filteredList">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange', 'pear'],
searchText: ''
}
},
computed: {
filteredList() {
return this.list.filter(item => item.includes(this.searchText))
}
}
}
</script>
```
在上面的代码中,我们定义了一个 `list` 数组和一个 `searchText` 变量用于绑定搜索框的输入值。然后,我们使用计算属性 `filteredList` 来过滤数组,只显示包含搜索关键字的项。在模板中,我们使用 `v-for` 指令循环渲染过滤后的列表。
阅读全文