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>