vue 通过多组复选框来过滤数据

1.通过if else 来筛选数据
在这里插入图片描述

<template>
<div><div><label><input type="checkbox" v-model="checkedNames" value="北京"> 北京</label><label><input type="checkbox" v-model="checkedNames" value="上海"> 上海</label><label><input type="checkbox" v-model="checkedNames" value="郑州"> 郑州</label></div><div><label><input type="checkbox" v-model="checkedPrices" value="高">高</label><label><input type="checkbox" v-model="checkedPrices" value="低">低</label></div>
<ul><li v-for="(item, index) in filteredList" :key="index">{{ item.name }} - {{ item.price }}</li>
</ul>
</div>
</template><script>
export default {data() {return {list: [{ name: '北京', price: '高' },{ name: '北京', price: '低' },{ name: '上海', price: '高' },{ name: '上海', price: '低' },{ name: '郑州', price: '高' },{ name: '郑州', price: '低' }],checkedNames: [],checkedPrices:[]}},computed: {filteredList() {// 如果两个勾选框都没有选中，则返回全部数据if (this.checkedNames.length === 0 && this.checkedPrices.length === 0) {return this.list;}// 只勾选了地区，没有勾选价格else if (this.checkedNames.length > 0 && this.checkedPrices.length === 0) {return this.list.filter(item => this.checkedNames.includes(item.name))}// 只勾选了价格，没有勾选地区else if (this.checkedNames.length === 0 && this.checkedPrices.length > 0) {if(this.checkedPrices.includes("高")) {return this.list.filter(item => item.price === "高");} else if(this.checkedPrices.includes("低")) {return this.list.filter(item => item.price === "低");}}// 同时勾选了地区和价格else {let areaFilter = this.list.filter(item => this.checkedNames.includes(item.name));let priceFilter = [];if(this.checkedPrices.includes("高")) {priceFilter.push(...areaFilter.filter(item => item.price === "高"));}if(this.checkedPrices.includes("低")) {priceFilter.push(...areaFilter.filter(item => item.price === "低"));}return priceFilter;}}}
}
</script>

2.优化：通过v-for来循环对象的模式+集合来过滤数据

<template><div><div v-for="(item, itemIndex) in searchArr" :key="itemIndex"><br>{{itemIndex}}:<label v-for="(li, liIndex) in item" :key="liIndex" :name="itemIndex"><input type="checkbox" v-model="checkedArr[itemIndex]" :value="li.name" :key="li.name">{{li.name}}</label></div><ul><li v-for="(item, index) in listShow" :key="index">{{item.id}}. {{ item.name }} - {{ item.price }}</li></ul></div>
</template><script>export default {data() {return {searchArr: {address: [{"name": "北京"}, {"name": "上海"}, {"name": "郑州"}],type: [{"name": "历史遗迹"}, {"name": "自然风光"}, {"name": "主题公园"}],attr: [{"name": "儿童"}, {"name": "年轻人"}, {"name": "老年人"}],price: [{"name": "1800"}, {"name": "2000"}, {"name": "3000"}]},checkedArr: {},list: [{id: 0,name: "北京大学",address: "北京",type: "历史遗迹",attr: "儿童",price: "1800"}, {id: 1,name: "湖北11",address: "湖北",type: "自然风光",attr: "儿童",price: "1800"}, {id: 2,name: "南京大学",address: "北京",type: "主题公园",attr: "儿童",price: "1800"}, {id: 3,name: "周师",address: "郑州",type: "历史遗迹",attr: "儿童",price: "1800"}, {id: 4,name: "郑州大学",address: "郑州",type: "主题公园",attr: "年轻人",price: "1800"}, ]}},mounted() {this.initCheckedArr();},methods: {initCheckedArr() {for (var key in this.searchArr) {this.checkedArr[key] = []}},searchList(key) {var l = this.list.map(item => {if (this.checkedArr[key] != undefined &&this.checkedArr[key].length > 0 &&this.checkedArr[key].indexOf(item[key]) != -1)return item}).filter(item => item != undefined)return l}},computed: {listShow() {console.log(this.checkedArr);var arr = [];for (var key in this.checkedArr) {arr = arr.concat(this.searchList(key))}return [...new Set(arr)].sort((a, b) => a.id - b.id)}}}
</script>