<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.8.0/css/layui.css" /> <script src="js/vue.js"></script> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } dd, dt { display: inline-block;cursor: pointer; } dl{ background: darkgrey; } dt { color: #8c8c96; } dd { margin: 0 0.5rem } .tit { color: #8c8c96 } .active{ color: white; } #app { margin: 0 auto;width: 800px;background: #8c8c96; } .tiaojian { color: red; } .tab { margin-top: 1rem; } .tab span{background: red;color:white;margin-right:1rem;padding: 0.2rem 0.5rem;} </style> </head> <body> <div id="app"> <dl v-for="(itemgood,goodindex) in good":key="itemgood.id"> <dt> {{itemgood.title}}</dt> <dd v-for="(item,listindex) in itemgood.list" :key="item" @click="plus(goodindex,item,listindex,itemgood)" :class="{tiaojian:itemgood.cn===listindex}" > {{item}}</dd> </dl> <div class="tab"> <p>已选择条件 <span v-if="!Object.keys(selectdata).length">未选择条件</span> <span v-for="(item,key) in selectdata" @click="del(key)">{{item}}</span> </p> </div> </div> <script> new Vue({ el: "#app", data: { mm:'', selectdata:{ // 0:123, // 1:456 }, good: [{ title: "品牌", list: ["华为", "苹果", "联想", "苹果1", "联想2", "苹果3", "联想4", "苹果5", "联想6"], id:0 }, { title: "价格", list: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], id:1 }, { title: "尺寸", list: ["11", "12", "13", "15", "17", "19", "21", "25", "27"], id:2 } ] }, methods:{ plus(i,y,listindex,itemgood){ this.$set(this.selectdata,i,y) itemgood.cn=listindex console.log(itemgood) }, del(i){ console.log(i) this.$delete(this.selectdata,i) //删除第几条信息 } } }) </script> </body> </html>