vue3实现多条件筛选
时间: 2023-07-24 18:17:34 浏览: 141
实现多条件筛选可以使用Vue3的计算属性和监听器来实现。以下是一个简单的示例:
```html
<template>
<div>
<label>姓名:</label>
<input v-model="nameFilter">
<br>
<label>年龄:</label>
<input v-model.number="ageFilter">
<br>
<label>性别:</label>
<select v-model="genderFilter">
<option value="">不限</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<br><br>
<ul>
<li v-for="person in filteredPersons" :key="person.id">
{{ person.name }},{{ person.age }}岁,{{ person.gender }}
</li>
</ul>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue';
export default {
setup() {
const persons = ref([
{ id: 1, name: '张三', age: 20, gender: '男' },
{ id: 2, name: '李四', age: 25, gender: '女' },
{ id: 3, name: '王五', age: 30, gender: '男' },
{ id: 4, name: '赵六', age: 35, gender: '女' },
]);
const nameFilter = ref('');
const ageFilter = ref(null);
const genderFilter = ref('');
const filteredPersons = computed(() => {
return persons.value.filter(person => {
return (!nameFilter.value || person.name.includes(nameFilter.value))
&& (!ageFilter.value || person.age === ageFilter.value)
&& (!genderFilter.value || person.gender === genderFilter.value);
});
});
// 监听器,当nameFilter或ageFilter或genderFilter改变时自动更新filteredPersons
watch([nameFilter, ageFilter, genderFilter], () => {
filteredPersons.value;
});
return {
persons,
nameFilter,
ageFilter,
genderFilter,
filteredPersons,
};
},
};
</script>
```
在这个示例中,我们使用了`ref`来定义了一个`persons`数组和三个过滤条件`nameFilter`、`ageFilter`、`genderFilter`。我们使用`computed`计算属性来根据过滤条件得到`filteredPersons`数组。
当过滤条件变化时,我们使用`watch`监听器来自动更新`filteredPersons`。最后我们将`persons`、`nameFilter`、`ageFilter`、`genderFilter`和`filteredPersons`返回给模板,以便在界面上进行展示。