vue如何进行筛选？
最近正在学习用uni-app做一个商城，但是到fifter这步出现了问题
下面是我的页面，我是希望能做一个多重的筛选，例如我点击价格，这时候会筛选符合价格条件的数，之后我点击房型，会在价格已经筛选的基础上在进行一次筛选，然后我再点击价格，会在房型的筛选条件中再次进行筛选，但我发现两个互选还可以，但我是要做七八个筛选条件的，按照我现在的思路是要写死的，求大佬提供个思路或者方法
原生js或者vue或者小程序的方法都可以
clicprice: function(item, index) {//第一层筛选，因为点击事件的函数名是共享的所以要通过是否含有某个字符来判断
if (item.text.indexOf("室") != '-1') {
this.cunzi1 = item.text
console.log(this.cunzi1)
this.fangxing = index
this.shai = this.older.filter((value) => {
if (this.cunzi2 == '') {
return value.numshi == item.text
} else if (this.cunzi2.indexOf('元') != '-1') {
if (this.cunzi2 == "1500元以下") {
return value.price < 1500 && value.numshi == item.text
} else if (this.cunzi2 == "1500-3000元") {
return value.price >= 1500 && value.price <= 3000 && value.numshi == item.text
} else if (this.cunzi2 == "2000-3000元") {
return value.price >= 2000 && value.price <= 3000 && value.numshi == item.text
} else if (this.cunzi2 == "2500-3000元") {
return value.price >= 2500 && value.price <= 3000 && value.numshi == item.text
} else if (this.cunzi2 == "3000元以上") {
return value.price >= 3000 && value.numshi == item.text
} else if (this.cunzi2 == "不限") {
return value
} else {
console.error("出错")
}
}
})
} else if (item.text.indexOf("元") != '-1' || item.text == "不限" ) {
this.older = this.houser
this.shunxu = index
this.cunzi2 = item.text
this.shai = this.older.filter((value) => {
if (this.cunzi1.indexOf("室") == "-1") {
if (item.text == "1500元以下") {
return value.price < 1500
} else if (item.text == "1500-3000元") {
return value.price >= 1500 && value.price <= 3000
} else if (item.text == "2000-3000元") {
return value.price >= 2000 && value.price <= 3000
} else if (item.text == "2500-3000元") {
return value.price >= 2500 && value.price <= 3000
} else if (item.text == "3000元以上") {
return value.price >= 3000
} else if (item.text == "不限") {
return value.price
} else {
console.error("出错")
}
} else if (this.cunzi1.indexOf("室") != "-1") {
if (item.text == "1500元以下") {
return value.price < 1500 && this.cunzi1 == value.numshi
} else if (item.text == "1500-3000元") {
return value.price >= 1500 && value.price <= 3000 && this.cunzi1 == value
.numshi
} else if (item.text == "2000-3000元") {
return value.price >= 2000 && value.price <= 3000 && this.cunzi1 == value
.numshi
} else if (item.text == "2500-3000元") {
return value.price >= 2500 && value.price <= 3000 && this.cunzi1 == value
.numshi
} else if (item.text == "3000元以上") {
return value.price >= 3000 && this.cunzi1 == value.numshi
} else if (item.text == "不限") {
return value && this.cunzi1 == value.numshi
} else {
console.error("出错")
}
}
});
}
},
回答：
export default { data() {
return {
// 原始数据
data: [],
// 过滤后的数据
filterData: [],
// 区域
areaList: [
{
label: "不限",
value: ""
},
{
label: "北京",
value: "北京"
}
],
// 价格
priceList: [
{
label: "不限",
space: [0, Infinity]
},
{
label: "1500元以下",
space: [0, 1500]
},
{
label: "1500-2000元",
space: [1500, 2000]
},
{
label: "2000元以上",
space: [2000, Infinity]
}
],
// 房型
typeList: ["不限", "一室", "二室", "三室", "四室", "五室", "五室以上"],
// 过滤的属性
filter: {
area: "",
priceIndex: 0,
type: "不限"
}
};
},
created() {
this.selectData();
},
methods: {
areaChange(val) {
this.filter.area = val;
},
priceChange(index) {
this.filter.priceIndex = index;
},
typeChange(val) {
this.filter.type = val;
},
moreChange(val) {
this.filter.more = val;
},
selectData() {
this.filterData = this.data.filter(item => {
return (
(item.area === this.filter.area || this.filter.area === "") &&
item.price >= this.filter.space[0] &&
item.price <= this.filter.space[1] &&
(item.type === this.filter.type || this.filter.type === "不限")
);
});
}
}
};
大概是这样
以上是 vue如何进行筛选？ 的全部内容， 来源链接： utcz.com/p/936602.html
