vue实现列表搜索筛选功能代码
时间: 2024-01-07 16:04:25 浏览: 35
这里是一个简单的 Vue 实现列表搜索和筛选的示例代码:
HTML:
```html
<div id="app">
<input type="text" v-model="searchText" placeholder="Search">
<select v-model="selected">
<option value="">All</option>
<option v-for="option in options" :value="option">{{ option }}</option>
</select>
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>
```
JavaScript:
```js
new Vue({
el: '#app',
data: {
items: [
'Apple',
'Banana',
'Cherry',
'Durian',
'Eggplant'
],
options: [
'Fruits',
'Vegetables'
],
selected: '',
searchText: ''
},
computed: {
filteredItems: function () {
var self = this;
return this.items.filter(function (item) {
return (self.selected === '' || self.selected === 'Fruits' && item.charAt(0) <= 'Z' || self.selected === 'Vegetables' && item.charAt(0) > 'Z') && item.toLowerCase().indexOf(self.searchText.toLowerCase()) !== -1;
});
}
}
});
```
这个示例包括一个输入框和一个下拉框,以及一个列表,可以根据输入框和下拉框的值来筛选列表中的项。其中,`items` 是要展示的列表数据,`options` 是下拉框中的选项,`selected` 是当前选中的选项,`searchText` 是输入框中的搜索文本。`filteredItems` 是一个计算属性,根据当前选中的选项和搜索文本来过滤 `items`,返回一个新的数组。过滤的逻辑可以根据具体需求修改。