Vue前端实现
筛选功能可以通过以下步骤实现：
1. 在
Vue组件
中定义一个data对象，用于存储
筛选条件和
筛选结果。
```javascript
data() {
return {
filter: {
name: '',
age: '',
gender: ''
},
filteredData: []
}
}
```
2. 在模板
中添加
筛选条件输入框和按钮，并绑定到data
中的属性。
```html
<div>
<label>姓名：</label>
<input type="text" v-model="
filter.name">
</div>
<div>
<label>年龄：</label>
<input type="number" v-model="
filter.age">
</div>
<div>
<label>性别：</label>
<select v-model="
filter.gender">
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<button @click="
filterData">
筛选</button>
```
3. 在
Vue组件的方法
中实现
筛选逻辑，根据
筛选条件过滤数据。
```javascript
methods: {
filterData() {
this.
filteredData = this.data.
filter(item => {
let valid = true;
if (this.
filter.name && item.name.indexOf(this.
filter.name) === -1) {
valid = false;
}
if (this.
filter.age && item.age !== Number(this.
filter.age)) {
valid = false;
}
if (this.
filter.gender && item.gender !== this.
filter.gender) {
valid = false;
}
return valid;
});
}
}
```
4. 在模板
中展示
筛选结果。
```html
<ul>
<li v-for="item in
filteredData" :key="item.id">
{{ item.name }} - {{ item.age }} - {{ item.gender }}
</li>
</ul>
```
完整代码如下：
```html
<template>
<div>
<div>
<label>姓名：</label>
<input type="text" v-model="
filter.name">
</div>
<div>
<label>年龄：</label>
<input type="number" v-model="
filter.age">
</div>
<div>
<label>性别：</label>
<select v-model="
filter.gender">
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<button @click="
filterData">
筛选</button>
<ul>
<li v-for="item in
filteredData" :key="item.id">
{{ item.name }} - {{ item.age }} - {{ item.gender }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: '张三', age: 20, gender: 'male' },
{ id: 2, name: '李四', age: 25, gender: 'male' },
{ id: 3, name: '王五', age: 30, gender: 'female' },
{ id: 4, name: '赵六', age: 35, gender: 'male' },
{ id: 5, name: '钱七', age: 40, gender: 'female' },
],
filter: {
name: '',
age: '',
gender: ''
},
filteredData: []
}
},
methods: {
filterData() {
this.
filteredData = this.data.
filter(item => {
let valid = true;
if (this.
filter.name && item.name.indexOf(this.
filter.name) === -1) {
valid = false;
}
if (this.
filter.age && item.age !== Number(this.
filter.age)) {
valid = false;
}
if (this.
filter.gender && item.gender !== this.
filter.gender) {
valid = false;
}
return valid;
});
}
}
}
</script>
```
本文介绍了在Vue.js中使用filter进行数据筛选的方法，包括简单的字符串筛选和复选框多条件筛选。通过选择多条条件并点击查询，可以显示所有匹配的项目。
最低0.47元/天 解锁文章
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
