案例-- 篩選商品 · Vue&&TypeSprict--基礎總結

>[success] # 篩選商品 ~~~ 1.實現的點擊數選項后展示 2.展示項可以進行刪除 ~~~ >[danger] ##### 技術思考點 ~~~ 1.數據展示為了給選中項選標記，這里給數據加了index值用來判斷是否加上藍色背景。 2.用$set 添加保證數據渲染 3.用$delete 刪除整個對象中key value 存儲的那一項 4.儲存格式說明下，展示在你選擇choose 對象，key是對象在數組中的位置，也相當于li中的行，v存的才是點擊數據 ~~~ >[danger] ##### 頁面形成效果 ![](https://box.kancloud.cn/ce4319ebc82281faf811fca181c4dacf_979x331.png) >[danger] ##### 代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style type="text/css"> #app{height: 260px;width: 760px;margin: 100px auto;padding: 145px 120px 95px;background: rgba(0,0,0,0.3);} #choose{height: 50px;background: rgba(224,241,239,1);border: 1px solid #e4e5e6;font-size: 18px;line-height: 50px;padding: 0 10px;} ul {padding: 0;margin: 0;list-style: none;background: #ebf7f6;} #type {height: 210px;padding: 17px 0 16px 28px;} #type li {height: 44px;color: #8a8a8a;line-height: 44px;} #type a {margin: 0 12px 0 11px;color: #000;} .active {background: rgb(40, 165, 196);} </style> </head> <body> <div id="app" style="margin: 0 auto;width: 960px" > <nav id="choose"> 你的選擇: <mark v-for="item,key in choose"> {{item}} <a href="javascript:;" @click="removeHandle(key)">x</a> </mark> </nav> <ul id="type"> <li v-for="i,line in ldata">{{i.title}}: <a v-for="item,index in i.list" @click="addChooseHandle(line,index,item)" v-bind:class="{active:i.index === index}" > {{item}} </a> </li> </ul> </div> <script> var ldata = [ { 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: ["安卓", "(", "Android", ")", "蘋果", "(", "IOS", ")", "微軟", "(", "WindowsPhone", ")", "無", "其他"] }, { title: '網絡', list: ["聯通3G", "雙卡單4G", "雙卡雙4G", "聯通4G", "電信4G", "移動4G"] } ] ldata.forEach(item => item.index = -1); var vm = new Vue({ el: '#app', data: { listIndex:0, ldata , choose:{}, }, methods:{ addChooseHandle(line, index, item){ this.$set(this.choose,line,item); // 在數據中增加了個index記錄選中樣式 this.ldata[line].index = index; }, removeHandle(key){ this.$delete(this.choose,key); // 刪除對應key this.ldata[key].index=-1;// 將標記class樣式數據調回初始 } } }); </script> </body> </html> ~~~