vue 实现类别筛选

1、html 部分

<div id="app"> <div class="selectCategory_box"> <div>类别：{item.text}}：{it}}  el: "#app", data: { selectCategory: [], category: [ { type: 1, text: '品牌', content: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPP", "vivo", "乐视", "360", "中兴", "索尼"] }, { type: 2, text: '尺寸', content: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"] }, { type: 3, text: '系统', content: ["安卓", "苹果", "微软", "其他"] } ] }, methods: { deleteItem(type) { this.selectCategory = this.selectCategory.filter(item => { return item.type !== type; }) }, handleSelect(type, sname) { let flag = this.selectCategory.some(item => item.type == type); if (flag) { this.selectCategory = this.selectCategory.map(item => { if (item.type == type) { item.sname = sname; } return item; }); } else { this.selectCategory.push({ type, sname }); }; this.selectCategory.sort((a, b) => { return a.type - b.type; }); } } }) 

3、css 部分

.selectCategory_box { display: flex; padding: 5PX 10PX; box-sizing: border-box; background-color: #888888; } .select_item { margin-right: 20px; color: #333333; } .select_item>span:last-child { color: red; font-size: 20px; font-weight: 600; background-color: #EEEEEE; } .category_box { background-color: #EEEEEE; padding: 2PX 10PX; box-sizing: border-box; } .category_item { margin: 16px 0; } .data_won_item { background-color: #666666; color: #888888; margin-right: 10px; padding: 3px 6px; box-sizing: border-box; cursor: pointer; border-radius: 3px; } 

4、演示