Vue.js极少代码的商城选项卡，自动选项排序_uview 价格排序选项卡-CSDN博客

本文链接：https://blog.csdn.net/qq_39126593/article/details/112582804

1.挂的cdn,直接运行就可以了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
		<style type="text/css">
			ul {
				display: flex;
				list-style: none;
			}

			ul li {
				height: 34px;
				line-height: 34px;
				margin: 20px;
				padding: 0 20px;
				cursor: pointer;
				box-sizing: border-box;
			}

			li.active {
				color: #fff;
				background-color: #6cf;
				border-radius: 17px;
			}

			.list2,
			.actives {
				display: flex;
				align-items: center;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="actives">
				<ul>
					<li class="active" v-for="item,key in actives" :key="key" @click="del(key)">{{item}}</li>
				</ul>
			</div>
			<div class="list">
				<div class="list2" v-for="(item,key) in obj" :key="key">
					<div class="name">{{key}}</div>
					<ul>
						<li v-for="(item2,index2) in item" @click="add(item,key,index2)">{{item2}}</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				actives: {},
				obj: {
					'价格:': ['1000-2000', '3000-4000', '5000-6000'],
					'厂家:': ['魅族', '小米', '华为'],
					'尺寸:': ['5.5英寸', '4.8英寸', '4.5英寸']
				},
			},
			methods: {
				add(item, key, index2) {
					this.$set(this.actives, Object.keys(this.obj).indexOf(key), item[index2])
				},
				del(key) {
					let obj = { ...this.actives};
					delete obj[key];
					this.actives = obj;
				}
			}
		})
	</script>
</html>