<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>筛选商品</title> <script type="text/javascript" src="js/vue.js"></script> <style> body{ font-size: 14px; font-family: "lucida sans typewriter",arial; } ul{ padding: 0; margin: 0; list-style: none; } a{ text-decoration: none; } img{ vertical-align: top; } #wrap{ width: 760px; height: 260px; margin: 100px auto; padding: 145px 120px 95px; background: url(img/bg.jpg) no-repeat 0 0; background: #87B2B3; } #section{ width: 760px; height: 260px; -moz-box-shadow:0px 0px 4px rgba(0,0,0,.2); box-shadow:0px 0px 4px rgba(0,0,0,.2); } #choose{ width: 788px; height: 50px; margin: 0 auto; background: #DBEFEF; line-height: 50px; text-indent: 21px; } #type{ width: 100%; height: 210px; padding: 17px 0 16px 28px; background: #E7F2F2; } #type li{ height: 44px; color: #8a8a8a; line-height: 44px; } #type a{ margin: 0 12px 0 11px; color: #000; } #choose mark{ position: relative; display: inline-block; height: 24px; line-height: 24px; border: 1px solid #28a5c4; color: #28a5c4; margin: 12px 5px 0; background: none; padding: 0 30px 0 6px; text-indent: 0; } #choose mark a{ position: absolute; top: 3px; right: 2px; display: inline-block; width: 18px; height: 18px; background: #28a5c4; color: #fff; line-height: 18px; font-size: 16px; text-align: center; } .active{ background: rgb(40,165,196); } </style> </head> <body> <div id="wrap"> <section id="section"> <nav id="choose"> 你的选择： <mark @click="removeHandle(key)" v-for="item,key in choose"> {{item}} <a href="javascript:;">×</a> </mark> </nav> <ul id="type"> <li v-for="item,index in dataList"> {{item.title}}： <a v-for="option,i in item.list" href="javascript:;" v-bind:class="{active:item.index===i}" @click="addChooseHandle(option,index,i)" > {{option}} </a> </li> </ul> </section> </div> </body> <script type="text/javascript"> let data=[ { title:'品牌', list:[ "苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", ] }, { title:'尺寸', list:[ "3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上" ] }, { title:'系统', list:[ "安卓", "苹果", "微软", "无", "其他", ] }, { title:'网络', list:[ "联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G", ] }, ] data.forEach(item=>item.index=-1) console.log(data) new Vue({ el:"#wrap", data:{ dataList:data, choose:{} }, methods:{ addChooseHandle(option,index,i){ console.log(option) this.$set(this.choose,index,option) // 找到操作的一行,把这一行的数据中的index,设置为点击的标签的下标 this.dataList[index].index=i }, removeHandle(key){ console.log(this.choose) console.log(key) // 删除对象的属性 this.$delete(this.choose,key) this.dataList[key].index=-1 } } }) </script> </html>
