vue 实现类别筛选

Posted 2021-07-31 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 实现类别筛选相关的知识，希望对你有一定的参考价值。

1、html 部分

<div id="app">
	<div class="selectCategory_box">
		<div>类别：</div>
		<div class="select_item" v-for="item in selectCategory" :key="item.type">
			<span v-text="item.sname "></span>
			<span @click="deleteItem(item.type)">×</span>
		</div>
	</div>

	<div class="category_box">
		<div class="category_item" v-for="item in category" :key="item.type">
			<span>{{item.text}}：</span>
			<span class="data_won_item" v-for="(it,ind) in item.content" :key="ind" @click="handleSelect(item.type,it)">{{it}} 	</span>
		</div>
	</div>
</div>

2、javascript 部分

new Vue({
	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;
}